當我們設計一個網頁時,往往需要給網頁上的圖片增加一些效果,比如邊緣陰影。CSS提供了幾種方法來給圖片添加陰影,下面我們來看一下。
/* 在單張圖片上添加陰影 */ img { box-shadow: 10px 10px 5px grey; } /* box-shadow屬性的參數含義依次是:水平偏移量,垂直偏移量,模糊半徑,陰影顏色。這個屬性可以同時設定多個陰影效果,用逗號隔開。*/ /* 在圖片容器上添加陰影 */ .image-container { box-shadow: 10px 10px 5px grey; } /* 使用這種方式,可以在圖片容器外圍添加一個陰影效果。*/ /* 使用偽元素添加陰影 */ .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 10px 10px 5px grey; } /* 這種方式可以在圖片容器的任意位置添加陰影效果,需要用到偽元素::before或::after和絕對定位來實現。*/
以上是CSS添加圖片陰影的幾種方式,可以根據需要選擇適合的方法。通過添加陰影效果,可以使圖片在網頁中更加生動、立體,同時也增加了設計的美感。