HTML5怎么設置圖片陰影 在網頁設計中，陰影可以給圖像增加立體感和深度感，讓頁面看起來更加優(yōu)美。在HTML5中，設置圖片陰影也非常簡單，下面我們來看看具體的步驟。 首先，我們需要準備一張圖片。這里我們使用一張名為“flower.jpg”的花卉圖片。代碼如下：

<img src="flower.jpg" />

接下來，我們可以使用CSS中的box-shadow屬性來設置圖片的陰影效果。該屬性通常用于為盒子添加陰影效果，格式如下：

box-shadow: 水平偏移量 垂直偏移量 模糊半徑 陰影尺寸 陰影顏色;

其中，水平偏移量和垂直偏移量指的是陰影相對于元素的偏移量，模糊半徑指的是陰影模糊的程度，陰影尺寸指的是陰影的大小，陰影顏色則指定了陰影的顏色。 例如，我們可以通過以下代碼為圖片添加一個黑色的陰影效果：

<style>
img {
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.5);
}
</style>

這里，我們指定了水平偏移量和垂直偏移量都為2px，陰影半徑為8px，陰影大小為0，陰影顏色為黑色。 除了指定陰影的顏色外，我們還可以使用CSS中的漸變效果為陰影添加顏色。例如，以下代碼會為圖片添加一個由淺藍色到深藍色漸變的陰影效果：

<style>
img {
box-shadow: 2px 2px 8px 0 #0000ff, 4px 4px 12px 0 #000099;
}
</style>

這里，我們?yōu)閳D片添加了兩個陰影效果，第一個陰影由2px水平偏移量、2px垂直偏移量和8px模糊半徑組成，其顏色為淺藍色（#0000ff）；第二個陰影由4px水平偏移量、4px垂直偏移量和12px模糊半徑組成，其顏色為深藍色（#000099）。 通過上述方法，我們可以很方便地為圖片添加陰影效果，讓網頁看起來更加美觀。