CSS中的陰影效果可以通過box-shadow
屬性來實(shí)現(xiàn)。box-shadow
屬性可以添加多個(gè)陰影,并且可以設(shè)置陰影的顏色、模糊半徑、陰影的偏移距離等參數(shù)。
下面是一個(gè)簡單的例子,展示了如何為一個(gè)元素添加陰影:
.shadow { box-shadow: 10px 10px 5px #888888; }
在這個(gè)例子中,.shadow
類被應(yīng)用到一個(gè)元素上,box-shadow
屬性的值10px 10px 5px #888888
表示:水平偏移10px,垂直偏移10px,模糊半徑5px,陰影顏色為灰色。
如果想要讓陰影更加突出,可以增大偏移距離或者模糊半徑的值,如果想要改變陰影的顏色,可以調(diào)整#888888
這個(gè)顏色值。
除了box-shadow
屬性,CSS中還有text-shadow
屬性可以用來給文本添加陰影。text-shadow
屬性的用法和box-shadow
類似,只不過它是用來設(shè)置文本陰影的。
.text-shadow { text-shadow: 2px 2px 4px #ff0000; }
在這個(gè)例子中,.text-shadow
類被應(yīng)用到一個(gè)元素上,text-shadow
屬性的值2px 2px 4px #ff0000
表示:水平偏移2px,垂直偏移2px,模糊半徑4px,陰影顏色為紅色。
通過調(diào)整這些參數(shù),可以實(shí)現(xiàn)各種樣式的陰影效果。