CSS3提供了很方便的方法來設置元素的陰影。你可以使用box-shadow屬性來指定元素的陰影。box-shadow屬性接受以下值:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
其中,水平偏移量和垂直偏移量表示陰影相對于元素的位置。模糊半徑是產生模糊效果的距離,可選的擴散半徑是在陰影周圍擴大或縮小陰影的距離。
以下是一個示例,其中陰影向右下方偏移5像素,模糊半徑為5像素,顏色為黑色:
.shadow { box-shadow: 5px 5px 5px black; }
你還可以同時使用多個陰影。例如,以下代碼設置了3個不同的陰影效果:
.shadow { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 6px -3px rgba(0, 0, 0, 0.12); }
其中每個陰影效果使用逗號分隔。注意,你可以在任何陰影效果中使用rgba顏色,以獲得更多的顏色控制。