在CSS中可以使用陰影效果屬性在HTML文檔中添加文本和邊框(圖像)陰影。下面本篇文章就來給大家介紹一下CSS的陰影效果屬性整慎,CSS添加陰影效果的方法抠璃,希望對大家有所幫助。
1蝠引、添加文本陰影
在CSS中可以使用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>text-shadow屬性</title>
? ? ? ? <style>
? ? ? ? ? ? h1 {
? ? ? ? ? ? ? ? color: red;
? ? ? ? ? ? ? ? text-shadow: 3px 5px 5px #656B79;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <h1>Hello world!</h1>
? ? </body>
</html>
效果圖:
2豺鼻、添加邊框(圖像)陰影
在CSS中可以使用box-shadow屬性將陰影應用于文本框综液。此屬性可神色中陰影的像素長度,寬度和模糊的距離以及陰影的顏色儒飒。
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
屬性值:
● h-shadow:設置水平陰影的位置谬莹,允許負值;必需值桩了,不可省略附帽。
● v-shadow:設置垂直陰影的位置,允許負值井誉;必需值蕉扮,不可省略。
● blur:設置模糊距離颗圣;可選值喳钟,可省略。
● spread:設置陰影的大性谄瘛荚藻;可選值,可省略洁段。
● color:設置陰影的顏色应狱;可選值,可省略祠丝。
● inset:設置從外層的陰影(開始時)改變陰影內側陰影疾呻;可選值,可省略写半。
示例1:添加邊框陰影
<!DOCTYPE html>
<html>
? <head>
<meta charset="UTF-8">
<title>box-shadow屬性</title>
? ? ? ? <style>
? ? ? ? ? ? div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div>Hello world岸蜗!</div>
? ? </body>
</html>
效果圖:
示例2:添加圖像陰影
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>圖片陰影</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="1.jpg" />
? ? ? ? </div>
? ? </body>
</html>
效果圖:
更多前端開發(fā)知識,請查閱 HTML中文網(wǎng) 5璃岳!