溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css3給盒子設置陰影的屬性是哪個”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
css3給盒子設置陰影的屬性是“box-shadow”。該屬性用于實現邊框陰影效果，將陰影應用于盒子元素，語法“box-shadow:水平陰影 垂直陰影 模糊半徑 擴展半徑 陰影顏色 投影方式”；若投影方式設為“inset”可實現內側陰影。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3給盒子設置陰影的屬性是“box-shadow”。
box-shadow屬性--實現邊框陰影效果
box-shadow屬性可以將陰影應用于文本框，可設置中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。
box-shadow可以為盒子元素添加陰影，支持添加一個或者多個。
box-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 投影方式;
注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
注意：inset 可以寫在參數的第一個或最后一個，其它位置是無效的。
X軸偏移量和Y軸偏移量值（水平陰影和垂直陰影）
X軸偏移量和Y軸偏移量值可以設置為負數
陰影模糊半徑：
此參數可選，值只能是為正值，如果值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。
陰影擴展半徑：
此參數可選，值可以是正負值，如果值為正數，整個陰影都延展擴大，反之值為負值時，則縮小。
示例
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 300px;
height: 100px;
background:#fff;
border: 1px solid #FFC0CB;
margin: 50px;
}
.box1 {
box-shadow: 10px 10px 5px #888888;
}
.box2 {
/* X軸偏移量為負數 */
box-shadow:-10px 10px 5px #666;
}
.box3 {
/* Y軸偏移量為負數 */
box-shadow: 10px -10px 5px #888888;
}
.box4 {
/* inset將外陰影改內陰影 */
box-shadow: 10px 10px 10px #888888 inset;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
“css3給盒子設置陰影的屬性是哪個”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
