CSS3 box-shadow 設定元素陰影
阿新 • • 發佈：2018-11-24
box-shadow 屬性
box-shadow 屬性可以設定一個或多個下拉陰影的框。即為元素設定陰影效果！
語法：box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負值 |
| v-shadow | 必需的。垂直陰影的位置。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小，陰影對外擴張的大小 |
| color | 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表 |
| inset | 可選。從外層的陰影（開始時）改變陰影內側陰影 |
| 預設值: | none |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxShadow="10px 10px 5px #888888" |
提示：1）元素邊框是什麼形狀，則投射出來的陰影也是什麼形狀，比如元素邊框是圓的，則陰影也是圓的。2）元素的陰影無論偏移多少，並不會對元素的位置有影響。
編碼示例
實現程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>box-shadow</title> <style type="text/css"> * { margin: 0px; padding: 0px; } .outDiv { width: 800px; height: 200px; margin: auto; border: 1px solid darkred; border-radius: 10px; } .innerDiv { float: left; width: 150px; height: 150px; text-align: center; border-radius: 10px; display: inline-block; margin-top: 20px; } .div1 { /**設定元素陰影向右偏移10畫素，向下偏移10畫素，模糊5px，顏色為 #888888*/ box-shadow: 10px 10px 5px #888888; } .div2 { /**設定元素陰影向右偏移10畫素，向上偏移10畫素，模糊10px，顏色為 #888888*/ box-shadow: 10px -10px 10px #888888; } .div3 { /**設定元素陰影上下左右偏移0畫素，模糊5px，陰影對外擴張5畫素，顏色為 #888888*/ box-shadow: 0 0 5px 5px #888888; margin-left: 50px; border-radius: 0; } img { /**設定元素陰影上下左右不進行偏移，模糊10px，對外擴張5px，顏色為 #554D4D*/ box-shadow: 0px 0px 10px 5px #554D4D; margin-left: 50px; border-radius: 50px; } </style> </head> <body> <div class="outDiv"> <div class="innerDiv div1">box-shadow: 10px 10px 5px #888888; <br>投影在兩側 </div> <div class="innerDiv div2">box-shadow: 10px -10px 10px #888888; <br>投影在兩側 </div> <div class="innerDiv div3">box-shadow: 0 0 5px 5px #888888; <br>投影在四周 </div> <div class="innerDiv"> <img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg"> <span style="white-space: nowrap">box-shadow: 0px 0px 10px 5px #554D4D;</span> <span>投影在四周</span> </div> </div> </body> </html>