溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3怎么實現圖片陰影效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3怎么實現圖片陰影效果”吧！
css3實現陰影屬性有：1、text-shadow屬性，可實現文字陰影效果；2、box-shadow屬性，可實現邊框陰影效果；3、filter屬性，需要和drop-shadow()函數一起使用，可給圖像設置一個陰影效果。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3實現陰影屬性
1、text-shadow屬性---實現文字陰影效果
text-shadow屬性用于設置帶陰影的文本；可設置陰影的像素長度、寬度和模糊的距離以及陰影的顏色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css設置文本陰影效果</title>
<style>
h2 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h2>文本陰影！</h2>
</body>
</html>
2、box-shadow屬性--實現邊框陰影效果
box-shadow屬性可以將陰影應用于文本框，可設置中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。
box-shadow可以為元素添加陰影，支持添加一個或者多個。
box-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 投影方式;
參數：
注意：inset 可以寫在參數的第一個或最后一個，其它位置是無效的。
此參數可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。
css代碼：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px #666;
}效果：
陰影擴展半徑：
此參數可選，值可以是正負值，如果值為正數，整個陰影都延展擴大，反之值為負值時，則縮小。
css代碼：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px -3px #666;
}效果：
X軸偏移量和Y軸偏移量值可以設置為負數
X軸偏移量為負數：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:-5px 5px 5px #666;
}效果：
Y軸偏移量為負數：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px -5px 5px #666;
}效果：
外陰影：
#box{
width:50px;
height:50px;
background:green;
box-shadow:5px 4px 10px #666;
}效果：
內陰影：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset;
}效果：
添加多個陰影：
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset,
3px 3px 5px pink,
6px 4px 2px green;
}效果：
3、filter 屬性
filter 屬性定義了元素(通常是<img>)的可視效果，當和drop-shadow()函數一起使用，可給圖像設置一個陰影效果。
filter:drop-shadow(h-shadow v-shadow blur spread color);
陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數如下：
h-shadow v-shadow (必須)
這是設置陰影偏移量的兩個 <length>值. <offset-x> 設定水平方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位.
如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).
<blur-radius> (可選)
這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
<spread-radius> (可選)
這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
<color> (可選)
查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>給圖像設置一個陰影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
感謝各位的閱讀，以上就是“css3怎么實現圖片陰影效果”的內容了，經過本文的學習后，相信大家對css3怎么實現圖片陰影效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
