css設置邊框陰影的方法:通過“box-shadow”屬性設置邊框陰影,只需要在css中添加“box-shadow: darkgrey 10px 10px 30px 5px”樣式代碼設置陰影效果即可。
邊框陰影(box-shadow)的基本語法:
box-shadow:color h-shadow v-shadow blur spread inset;
color:陰影顏色 ------------ 可選
h-shadow :水平偏移量 ----必選
v-shadow:垂直偏移量-----必選
blur:模糊距離 -------------可選
spread:陰影尺寸---------- 可選
inset:內陰影 --------------可選
示例:
css代碼:
.div1{width:200px;
height:200px;
margin:20px auto;
line-height: 200px;
text-align: center;
background: cadetblue;
border:2px solid darkslategray;
box-shadow: darkgrey 10px 10px 30px 5px ;//邊框陰影
}
HTML代碼:
<div class="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