HTML5 中的多重陰影(Multiple Shadows)是一項很實用的功能,可以讓我們?yōu)橐粋€元素添加多個陰影效果。
在 CSS3 中,我們可以使用box-shadow
屬性來添加陰影效果,但只支持添加單一的陰影。而在 HTML5 中,我們可以使用box-shadow
屬性的多個值來添加多個陰影,其語法如下:
box-shadow: h-shadow v-shadow blur spread color1, h-shadow v-shadow blur spread color2, ...;
其中,h-shadow
和v-shadow
分別表示陰影的水平和垂直偏移量,可以使用負數(shù)來實現(xiàn)陰影向上或向左的效果;blur
表示陰影的模糊半徑,也可以使用負數(shù);spread
表示陰影的擴散半徑,可以使用正數(shù)或負數(shù);color1
和color2
分別表示陰影的顏色。
例如,下面的代碼將為一個元素添加兩個陰影效果:
box-shadow: 1px 1px 5px #000, -1px -1px 5px #fff;
這樣就會在元素的右下方和左上方分別出現(xiàn)黑色和白色的陰影。
需要注意的是,多重陰影的效果是按照代碼中的陰影順序依次疊加的。如果陰影疊加后超出了元素的邊界,那么超出的部分會被裁剪。