盒子陰影樣式單詞：box-shadow
文法
div{box-shadow:0 0 1px #000 inset;}
代表邊框間距靠左0 靠上0 和1px陰影範圍 陰影顏色為黑色（#000），有inset 代表框內陰影 ，不帶inset 代表框外陰影。
注意：
box-shadow:0px 0px 1px #000
第1個值為0時，代表左右邊框陰影 為1px範圍
第1個值為正整數 代表 左邊框陰影
第1個值為負整數 代表 右邊框陰影
同理
第2個值為0 代表上下邊框陰影
第2個值為正整數 代表1px陰影距離上邊框多少
第1個值為負整數 代表下邊框陰影設定
分別對DIV盒子和圖片IMG設定內陰影和外陰影為案例。
1、案例HTML代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>對象陰影 線上示範 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子物件陰影測試</div> <div class="box">DIV盒子內陰影</div> <div>圖片對象陰影測試</div> <div class="box2"><img src="images/div-logo.gif" /></div> </body> </html>
2、案例CSS代碼
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto} .box2 img {box-shadow:5px 2px 6px #000}
CSS3中的box-shadow用法就這麼多了，更多精彩請關注php中文網其它相關文章！
相關閱讀：
HTML裡DIV相互重疊怎麼辦
html裡的br，p和DIV有什麼區別
html的絕對路徑和相對路徑怎麼使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
