CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。box-shadow屬性可以為元素添加內(nèi)、外陰影或者同時添加內(nèi)外陰影。其語法如下：
其中，各參數(shù)的含義如下：
- h-shadow：必須指定，表示陰影的水平偏移量。可正可負，正值表示右側(cè)陰影，負值表示左側(cè)陰影。
- v-shadow：必須指定，表示陰影的垂直偏移量。可正可負，正值表示下方陰影，負值表示上方陰影。
- blur：可選，表示陰影的模糊半徑(模糊值越大，越模糊)。
- spread：可選，表示陰影的擴展半徑(正值表示陰影擴大，負值表示陰影縮小)。
- color：可選，表示陰影的顏色。默認為黑色。
- inset：可選，表示添加內(nèi)陰影，如果沒有這個參數(shù)，則表示添加外陰影。
例如，以下代碼可為元素添加一個黑色、4px的外陰影，水平偏移量為0，垂直偏移量為2px，模糊半徑為2px，擴展半徑為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及以下版本的瀏覽器，需要考慮兼容性問題。
京公網(wǎng)安備 11010802030320號