CSS半透明陰影是Web開發中常用的一種效果,它可以為頁面元素添加一層半透明的陰影,增加了頁面的立體感和美觀性。
要實現CSS半透明陰影,有兩種方式可以選擇:box-shadow和text-shadow。
.box { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
在box-shadow中,第一個參數表示陰影偏移量,第二個參數表示陰影模糊程度,第三個參數表示陰影擴展半徑,第四個參數rgba(0, 0, 0, 0.16)則表示陰影顏色和透明度。我們還可以通過設置多個陰影來實現更復雜的效果。
.text { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
在text-shadow中,第一個參數表示陰影偏移量,第二個參數表示陰影模糊程度,第三個參數表示陰影擴展半徑,第四個參數rgba(0, 0, 0, 0.3)則表示陰影顏色和透明度。text-shadow通常用于為文字添加陰影效果。
需要注意的是,box-shadow和text-shadow都只適用于支持CSS3的瀏覽器,對于低版本瀏覽器兼容性問題可能需要特殊處理。