溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了DIV+CSS3中box-shadow對象實現盒子陰影和圖片陰影的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、盒子陰影樣式單詞：box-shadow
2、語法
p{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個值為負整數 代表下邊框陰影設置
3、瀏覽器兼容圖
瀏覽器兼容一覽表圖
pCSS5分別對p盒子和圖片IMG設置內陰影和外陰影為案例。
1、案例HTML代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>對象陰影 在線演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>盒子對象陰影測試</div> <div class="box">DIV盒子內陰影</div> <div>圖片對象陰影測試</div> <div class="box2"><img src="images/45.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}分別設置p對象內陰影效果和圖片外陰影效果
3、案例截圖
p內陰影和CSS圖片外陰影效果截圖
4、說明：需要在IE9及以上瀏覽器測試應用或谷歌、蘋果等瀏覽器進行測試
5、CSS3在線演示：（在IE9以上瀏覽器 、谷歌等瀏覽器測試）
感謝你能夠認真閱讀完這篇文章，希望小編分享的“DIV+CSS3中box-shadow對象實現盒子陰影和圖片陰影的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
