CSS3 盒子陰影box-shadow
使用box-shadow屬性可以向框添加一個(gè)或多個(gè)陰影，語(yǔ)法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由2?4個(gè)長(zhǎng)度值、可選的顏色值、可選的inset關(guān)鍵詞來(lái)規(guī)定，省略長(zhǎng)度的值是0。
box-shadow屬性的值包含了以下幾個(gè)：
?h-shadow：必需，水平陰影的位置，允許負(fù)值。
?v-shadow：必需，垂直陰影的位置，允許負(fù)值。
?blur：可選，模糊距離。
?spread：可選：陰影的尺寸。
?color：可選，陰影的顏色。
?inset：可選，將外部陰影(outset)改為內(nèi)部陰影。
可以結(jié)合圓角邊框按鈕制作一個(gè)炫酷的按鈕。當(dāng)然，這個(gè)按鈕是之前的按鈕的升級(jí)版。
【例題】使用box-shadow屬性
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #ccc;
}
div{
width: 200px;
height: 50px;
margin:30px auto;
font-size: 30px;
line-height: 45px;
text-align: center;
color:#fff;
border:5px solid #fff;
border-radius: 10px;
background: #f46;
cursor:pointer;
}
div:hover{
box-shadow: 0 10px 40px 5px #f46;
}
</style>
</head>
<body>
<div>button</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>