CSS3中的box-shadow屬性可以輕松實(shí)現(xiàn)陰影的添加。box-shadow屬性可以為元素添加內(nèi)、外陰影或者同時(shí)添加內(nèi)外陰影。其語法如下:
其中,各參數(shù)的含義如下:
- h-shadow:必須指定,表示陰影的水平偏移量??烧韶?fù),正值表示右側(cè)陰影,負(fù)值表示左側(cè)陰影。
- v-shadow:必須指定,表示陰影的垂直偏移量。可正可負(fù),正值表示下方陰影,負(fù)值表示上方陰影。
- blur:可選,表示陰影的模糊半徑(模糊值越大,越模糊)。
- spread:可選,表示陰影的擴(kuò)展半徑(正值表示陰影擴(kuò)大,負(fù)值表示陰影縮小)。
- color:可選,表示陰影的顏色。默認(rèn)為黑色。
- inset:可選,表示添加內(nèi)陰影,如果沒有這個(gè)參數(shù),則表示添加外陰影。
例如,以下代碼可為元素添加一個(gè)黑色、4px的外陰影,水平偏移量為0,垂直偏移量為2px,模糊半徑為2px,擴(kuò)展半徑為0:
.box {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4);
}
如果需要添加內(nèi)陰影,則在屬性值后面加上inset參數(shù)即可,例如:
.box {
box-shadow: inset 0 0 10px #333;
}
注意,box-shadow屬性不支持IE8及以下版本的瀏覽器,需要考慮兼容性問題。