CSS影陰是一種常用的CSS技巧,它可以為HTML元素添加陰影效果,讓頁面顯得更加立體和生動。在CSS中,影陰通常使用box-shadow屬性來實現(xiàn)。
box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit;
其中,box-shadow的各個參數(shù)含義如下:
- none:無陰影效果
- h-shadow:水平位移距離,可以為正數(shù)、負數(shù)或0
- v-shadow:垂直位移距離,可以為正數(shù)、負數(shù)或0
- blur:陰影模糊程度,可以為正數(shù)或0,值越大陰影越模糊
- spread:陰影擴散程度,可以為正數(shù)、負數(shù)或0,值越大陰影面積越大
- color:陰影顏色,可以為顏色值或RGB值
- inset:是否將陰影設(shè)置在元素內(nèi)部,可選值為inset或不設(shè)置
- initial:重置為默認值
- inherit:繼承父元素的設(shè)置
例如,以下代碼將為一個div元素添加一組偏上、偏右的圓角矩形陰影效果:
div { box-shadow: 5px -5px 5px 0px rgba(0,0,0,.3); }
以上代碼中,水平位移距離為5px,垂直位移距離為-5px,陰影模糊程度為5px,陰影顏色為黑色的半透明(透明度為0.3)。
除了box-shadow屬性外,CSS還提供了text-shadow屬性來為文本添加陰影效果。text-shadow的用法與box-shadow類似,不再贅述。
總之,CSS影陰是一種常用的裝飾效果,可以為頁面元素增加層次感和立體感,提高用戶體驗。