陰影是CSS中常用的效果之一,讓頁面元素更具立體感、豐富性。我們可以通過設置陰影的色號、大小等屬性來控制陰影的樣式。
box-shadow: 0 0 10px #000;
上面的代碼表示一個黑色陰影,陰影大小為10像素,水平和垂直方向上偏移量均為0。如果要設置偏移量,可以在前兩個值中分別設置水平和垂直方向上的偏移量,如下:
box-shadow: 5px 5px 10px #000;
這樣就會得到一個向右下方偏移5像素的陰影了。當然,也可以設置負值來實現向左、向上的偏移。
CSS中的色號可以是命名色,也可以是十六進制顏色值,如下:
box-shadow: 5px 5px 10px red; box-shadow: 5px 5px 10px #ff0000;
除了常規的陰影外,還可以設置多個陰影疊加,使用逗號分隔不同的陰影樣式即可,如下:
box-shadow: 0 0 10px #000, 0 0 20px #fff;
這樣就得到了一個黑色和一個白色陰影疊加的效果,注意兩個陰影之間要用逗號分隔。