CSS3陰影效果可以通過box-shadow
屬性來實現(xiàn),這個屬性可以為一個元素添加多個陰影,每個陰影由四個部分組成:水平偏移、垂直偏移、模糊半徑和顏色,下面是一個簡單的例子:
div { box-shadow: 10px 10px 5px #000; }
在這個例子中,10px 10px
表示陰影的水平偏移和垂直偏移,5px
表示陰影的模糊半徑,#000
表示陰影的顏色,這個屬性可以添加多個陰影,只需要在多個陰影之間用逗號隔開即可。
除了box-shadow
屬性,CSS3還提供了text-shadow
屬性,用于給文本添加陰影效果,這個屬性和box-shadow
類似,也是由四個部分組成:水平偏移、垂直偏移、模糊半徑和顏色,下面是一個簡單的例子:
p { text-shadow: 2px 2px 1px #333; }
在這個例子中,2px 2px
表示陰影的水平偏移和垂直偏移,1px
表示陰影的模糊半徑,#333
表示陰影的顏色,和box-shadow
一樣,這個屬性也可以添加多個陰影,只需要在多個陰影之間用逗號隔開即可。
需要注意的是,CSS3的陰影效果在不同的瀏覽器中有不同的兼容性和渲染方式,因此在實際使用中需要注意瀏覽器的兼容性問題,由于CSS3的陰影效果是基于像素的,因此在實際使用中還需要注意像素單位的轉(zhuǎn)換問題。