CSS可以給圖片添加一層陰影,具體步驟如下:
1、在HTML中,給圖片添加陰影需要用到CSS的box-shadow
屬性。box-shadow
屬性可以添加多個(gè)陰影,每個(gè)陰影由四個(gè)部分組成:水平偏移、垂直偏移、模糊半徑和顏色。
2、示例代碼如下:
<img src="image.jpg" style="box-shadow: 10px 10px 5px #888888;">
上述代碼會給圖片添加一層陰影,陰影的水平偏移為10像素,垂直偏移為10像素,模糊半徑為5像素,顏色為#888888。
3、如果想要添加多層陰影,可以在box-shadow
屬性中逗號分隔每個(gè)陰影。
<img src="image.jpg" style="box-shadow: 10px 10px 5px #888888, -10px -10px 5px #555555;">
上述代碼會給圖片添加兩層陰影,分別位于圖片的右側(cè)和左側(cè)。
4、需要注意的是,box-shadow
屬性會影響圖片的大小和位置,如果需要保持圖片的大小和位置不變,可以將圖片放入一個(gè)容器中,并給容器添加box-shadow
屬性。
<div style="box-shadow: 10px 10px 5px #888888;"> <img src="image.jpg"> </div>
上述代碼會給圖片添加一層陰影,但不會影響圖片的大小和位置。