css可以實現很多的圖片效果，圖片陰影效果就是其中之一，那麼css如何為圖片添加陰影效果？這篇文章就跟大家介紹如何使用css為圖片添加陰影（附程式碼），讓大家了解css為圖片加上陰影的兩種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來看看css為圖片添加陰影效果的第一種方法：設定box-shadow屬性，透過一個簡單的程式碼範例來看看box-shadow屬性的實現方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--box-shadow属性</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo img{
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghwm/default1.png" data-src="css怎麼為圖片加上陰影效果？圖片添加陰影的兩種方法（程式碼實例）" class="lazy" / alt="css怎麼為圖片加上陰影效果？圖片添加陰影的兩種方法（程式碼實例）" >
</div>
</body>
</html>效果圖：
box-shadow屬性設定圖片陰影是不是很簡單，我們來看看box-shadow屬性的是如何設定的：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必要設定的值，定義水平陰影的位置。允許負值。
v-shadow：必要設定的值，定義垂直陰影的位置。允許負值。
blur：可選設定的值，定義模糊距離。
spread：可選設定的值，定義陰影的尺寸。
color ：可選設定的值，定義陰影的顏色。如果沒有設定值，顏色值會基於瀏覽器顯示，建議設定。
inset：可選設定的值，設定後可將外部陰影 (outset) 改為內部陰影。
接下來我們來看看css為圖片加上陰影效果的第二種方法：使用css3的濾鏡屬性-----filter 屬性設定圖片陰影。
可以設定filter:drop-shadow(）;來為圖片加上陰影，我們來透過一個簡單的程式碼範例看看實作方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--box-shadow属性</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo img{
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}
</style>
</head>
<body>
<div class="demo">
<img src="/static/imghwm/default1.png" data-src="css怎麼為圖片加上陰影效果？圖片添加陰影的兩種方法（程式碼實例）" class="lazy" / alt="css怎麼為圖片加上陰影效果？圖片添加陰影的兩種方法（程式碼實例）" >
</div>
</body>
</html>效果圖：
說明：
filter:drop-shadow(h-shadow v-shadow blur spread color);
h-shadow：設定陰影的水平方向偏移量；允許負值，負值會使陰影出現在元素左邊。
v-shadow：設定陰影的垂直方向偏移量；允許負值，負值會使陰影出現在元素上方。
blur：設定陰影的模糊度，數值越大，越模糊，陰影就會變得更大更淡；不允許負值，若未設定，預設是0 (陰影的邊界很銳利)。
spread：設定陰影的尺寸，正值會使陰影擴張變大，負值會是陰影縮小；若未設定，預設是0 (陰影會與元素一樣大小)。
注意：在Webkit以及其他一些瀏覽器中不支援spread，加上了也不會渲染。
color：設定陰影顏色；若未設定，顏色值基於瀏覽器，建議設定顏色。
總結：以上就是css為圖片添加陰影的兩種方法的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS3影片教學，Html5影片教學，bootstrap影片教學！
以上是css怎麼為圖片加上陰影效果？圖片添加陰影的兩種方法（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
