CSS3凹陷邊框(box-shadow)可以讓邊框具有凹陷的效果。它是CSS3新增的屬性之一,可以在視覺上增強邊框的立體感,使頁面元素更加協調。
如何使用CSS3凹陷邊框呢?首先,在CSS樣式表里的目標元素添加box-shadow屬性值,具體語法如下:
selector { box-shadow: inset x-offset y-offset [blur] [spread] [color]; }
其中,inset表示內部陰影,x-offset表示水平方向的偏移量,y-offset表示垂直方向的偏移量,blur表示邊緣模糊半徑,spread表示陰影的擴展距離,color表示陰影的顏色。以下是一個示例:
div { box-shadow: inset 0px 0px 10px 3px #ddd; }
這個示例代碼會使一個div元素的邊框呈現較深的凹陷效果,內部陰影的顏色為#ddd,大小為10px,半徑為3px。
需要注意的是,box-shadow屬性不能給行內元素和絕對定位的元素設置陰影,如果要對文本設置陰影可以采用text-shadow屬性。
使用CSS3凹陷邊框可以讓頁面元素更加立體,為網頁設計帶來更多的可能性。
上一篇css3幾個圖片輪播
下一篇css3分欄布局插入圖片