CSS3之DIV等盒子對象陰影-圖片陰影效果
1、盒子陰影樣式單詞：box-shadow
2、語法
- div{box-shadow:001px#000inset;}
代表邊框間距靠左0 靠上0 和1px陰影范圍 陰影顏色為黑色（#000），有inset 代表框內陰影 ，不帶inset 代表框外陰影。
注意：
box-shadow:0px 0px 1px #000
第1個值為0時，代表左右邊框陰影 為1px范圍
第1個值為正整數 代表 左邊框陰影
第1個值為負整數 代表 右邊框陰影
同理
第2個值為0 代表上下邊框陰影
第2個值為正整數 代表1px陰影距離上邊框多少
第1個值為負整數 代表下邊框陰影設置
3、對象陰影語法分析圖
對象陰影box-shadow樣式分析圖
DIVCSS5分別對DIV盒子和圖片IMG設置內陰影和外陰影為案例。
1、案例HTML代碼
- <!DOCTYPEhtml>
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>對象陰影DIVCSS5VIP</title>
- <linkhref="images/style.css"rel="stylesheet"type="text/css"/>
- <!--www.divcss5.com-->
- </head>
- <body>
- <div>盒子對象陰影測試</div>
- <divclass="box">DIV盒子內陰影</div>
- <div>圖片對象陰影測試</div>
- <divclass="box2"><imgsrc="images/divcss5-logo.gif"/></div>
- </body>
- </html>
2、案例CSS代碼
- .box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
- .box2img{box-shadow:5px2px6px#000}
分別設置DIV對象內陰影效果和圖片外陰影效果
3、案例截圖
DIV內陰影和CSS圖片外陰影效果截圖
4、說明：需要在IE9及以上瀏覽器測試應用或谷歌、蘋果等瀏覽器進行測試
5、CSS3：（在IE9以上瀏覽器 、谷歌等瀏覽器測試）
6、div css案例打包下載：（鼠標另存為）
立即下載 （3.867KB）
1、對應CSS3手冊
http://www.divcss5.com/css3/box-shadow.html
2、因為兼容性，CSS3屬性在IE9以下IE瀏覽器不支持不兼容，所以設置后只有IE9以上瀏覽器兼容，所以使用時候慎重選擇。
3、一般CSS3樣式使用不考慮低版本，包括淘寶聚劃算使用陰影和圓角也是在IE9及以上瀏覽器能看到，在低版本瀏覽器不能看到CSS3樣式效果。
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
