css如何實現陰影效果
- 青灯夜游原創
- 2021-04-13 18:37:2323537瀏覽
方法：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>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影！</h1>
</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"/ alt="css如何實現陰影效果" >
</div>
</body>
</html>
（學習影片分享：css影片教學）
以上是css如何實現陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css如何設定表格間距下一篇：css如何設定表格間距