CSS可以通過box-shadow
屬性給div添加陰影,這個(gè)屬性接受四個(gè)值,分別是水平偏移、垂直偏移、模糊半徑和顏色,下面是一個(gè)簡單的例子:
div { box-shadow: 10px 10px 5px #000; }
在這個(gè)例子中,10px 10px
表示陰影的水平偏移和垂直偏移都是10像素,5px
表示模糊的半徑是5像素,#000
表示陰影的顏色是黑色,你可以根據(jù)需要調(diào)整這些值。
需要注意的是,box-shadow
屬性在IE瀏覽器中不被支持,如果你需要兼容IE瀏覽器,可以考慮使用其他方法或者庫來實(shí)現(xiàn)陰影效果。
如果你需要給多個(gè)div添加不同的陰影效果,你可以給每個(gè)div一個(gè)***的class或者id,然后在CSS中分別定義它們的陰影效果。
<div class="shadow1"></div> <div class="shadow2"></div> <div id="shadow3"></div>
.shadow1 { box-shadow: 10px 10px 5px #000; } .shadow2 { box-shadow: 20px 20px 10px #333; } #shadow3 { box-shadow: 30px 30px 15px #666; }
在這個(gè)例子中,每個(gè)div都有自己獨(dú)特的陰影效果,你可以根據(jù)需要調(diào)整它們的樣式。