CSS 陰影是 Web 開發中一個非常有用的特性,它可以使網頁元素看起來更立體、更豐富。CSS 陰影屬性可以通過 box-shadow 屬性進行設置。
.box { box-shadow: 10px 10px 5px grey; }
上面的代碼表示在 .box 元素上設置了一個陰影,陰影的橫向偏移量是 10px,縱向偏移量也是 10px,模糊半徑是 5px,顏色為灰色。可以通過調整這些參數來得到想要的陰影效果。
除了 box-shadow 外,CSS 還提供了 text-shadow 屬性來設置文本陰影。例如,下面的代碼會在 h1 元素上添加一層黑色的文本陰影。
h1 { text-shadow: 1px 1px black; }
值得注意的是,CSS 陰影屬性的支持性并不完全相同,特別是一些老的瀏覽器可能不支持某些陰影效果。可以在 Can I Use 網站上查看不同瀏覽器的支持情況,并在編寫代碼時做好兼容性處理。