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