css設置邊框陰影的方法：通過“box-shadow”屬性設置邊框陰影，只需要在css中添加“box-shadow: darkgrey 10px 10px 30px 5px”樣式代碼設置陰影效果即可。

邊框陰影（box-shadow）的基本語法：

box-shadow：colorh-shadowv-shadowblurspreadinset；

• color：陰影顏色 ------------ 可選

• h-shadow ：水平偏移量 ----必選

• v-shadow：垂直偏移量-----必選

• blur：模糊距離 -------------可選

• spread：陰影尺寸---------- 可選

• inset：內陰影 --------------可選

示例：

css代碼：

.div1{
width:200px;
height:200px;
margin:20pxauto;
line-height:200px;
text-align:center;
background:cadetblue;
border:2pxsoliddarkslategray;
box-shadow:darkgrey10px10px30px5px;//邊框陰影
}

HTML代碼：

<divclass="div1">邊框陰影示例</div>

效果如下：

box-shadow陰影說明：

屬性說明（順序依次對應）：

陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色

默認是外陰影

內陰影：inset 可以設置成內部陰影

注意：

此屬性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用來設置文字陰影 ,因為是新屬性，為了兼容各主流瀏覽器并支持這些主瀏覽器的較低版本，基于主流瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成：

谷歌：-webkit-box-shadow的形式

Firefox：-moz-box-shadow的形式

opera： -o-box-shadow

IE>9： -ms-box-shadow

總結

以上是生活随笔為你收集整理的css怎么设置边框阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。