溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css實現陰影效果的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
方法：1、使用text-shadow屬性，語法“text-shadow: 水平陰影 垂直陰影 模糊距離 顏色;”；2、使用box-shadow屬性，語法“box-shadow: 水平陰影 垂直陰影 模糊距離 陰影大小 顏色 inset;”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1：使用text-shadow屬性
text-shadow屬性用于設置帶陰影的文本；可設置陰影的像素長度、寬度和模糊的距離以及陰影的顏色。
語法：
text-shadow: h-shadow v-shadow blur color;
屬性值：
h-shadow：設置水平陰影的位置，允許負值。
v-shadow：設置垂直陰影的位置，允許負值。
blur：設置模糊的距離。
color：設置陰影的顏色。
示例：
<!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: h-shadow v-shadow blur spread color inset;
屬性值：
h-shadow：設置水平陰影的位置，允許負值；必需值，不可省略。
v-shadow：設置垂直陰影的位置，允許負值；必需值，不可省略。
blur：設置模糊距離；可選值，可省略。
spread：設置陰影的大小；可選值，可省略。
color：設置陰影的顏色；可選值，可省略。
inset：設置從外層的陰影（開始時）改變陰影內側陰影；可選值，可省略。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css設置陰影效果</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="img/1.jpg"/>
</div>
</body>
</html>
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css實現陰影效果的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
