box-shadow
box-shadow:x偏移 y偏移 阴影半径 扩张半径 阴影颜色
<body>
<div class="box aligncenter"></div>
</body>
.aligncenter{
margin:100px auto 0 auto;
}
阴影半径
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 5px lightskyblue;
}
x/y偏移
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 5px lightskyblue;
box-shadow:3px 3px 5px lightskyblue;
box-shadow:5px 5px 5px lightskyblue;
box-shadow:10px 10px 5px lightskyblue;
box-shadow:50px 50px 5px lightskyblue;
box-shadow:100px 100px 5px lightskyblue;
}
扩张半径
扩张半径类似border,但又不同于border,因为box-shadow不占据流空间。
扩展半径为正值时,阴影面积扩大;为负值时,阴影面积缩小。
扩张半径为正值
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 0 5px lightskyblue;
box-shadow:0 0 0 5px lightskyblue,
0 0 0 10px lightseagreen;
}
扩张半径为负值
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:10px 10px 5px lightskyblue;
box-shadow:10px 10px 5px -5px lightskyblue;
box-shadow:10px 10px 5px -10px lightskyblue;
}
inset
如果没有指定inset
,则默认阴影在边框外;
如果指定了inset
,则阴影在边框内,且背景之上,内容之下。
实例:凹凸效果之骰子
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
body{
background-color:#333;
}
.box{
background-color:#e7e7e7;
margin:16px;
padding:4px;
width:104px;height: 104px;
border-radius: 10%;
box-shadow:inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
}
.item{
width:24px;height: 24px;
border-radius: 50%;
margin:4px;
background-color: #333;
box-shadow: inset 0 3px #111,
inset 0 -3px #555;
}
单侧投影
扩张半径为负值,且扩张半径等于阴影半径,此时
如果x、y方向均无偏移,则阴影不可见;
如果仅x方向有正向偏移,则右侧有阴影;
如果仅x方向有负向偏移,则左侧有阴影;
如果仅y方向有正向偏移,则底部有阴影;
如果仅y方向有负向偏移,则顶部有阴影。
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 5px -5px lightskyblue;
box-shadow:5px 0 5px -5px lightskyblue;
box-shadow:-5px 0 5px -5px lightskyblue;
box-shadow:0 5px 5px -5px lightskyblue;
box-shadow:0 -5px 5px -5px lightskyblue;
}
相邻两侧投影
- 第一种思路
扩张半径为负值,且扩张半径等于阴影半径,此时
如果x、y方向均无偏移,则阴影不可见;
如果x、y方向都有正向偏移,则右下角有阴影,即右侧、底部有阴影;
如果x、y方向都有负向偏移,则左上角有阴影,即左侧、顶部有阴影。
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 5px -5px lightskyblue;
box-shadow:5px 5px 5px -5px lightskyblue;
box-shadow:-5px -5px 5px -5px lightskyblue;
}
- 第二种思路
扩张半径为负值,且扩张半径等于阴影半径的一半,此时
如果x、y方向均无偏移,则四侧都有阴影,且阴影宽度等于阴影半径的一半;
如果x、y方向都有正向偏移,则右下角有阴影,即右侧、底部有阴影,且阴影宽度等于阴影半径;
如果x、y方向都有负向偏移,则左上角有阴影,即左侧、顶部有阴影,且阴影宽度等于阴影半径。
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 10px -5px lightskyblue;
box-shadow:5px 5px 10px -5px lightskyblue;
box-shadow:-5px -5px 10px -5px lightskyblue;
}
相对两侧投影
.box{
width:100px;
height:100px;
background-color:lightyellow;
box-shadow:0 0 5px -5px lightskyblue;
box-shadow:5px 0 5px -5px lightskyblue,
-5px 0 5px -5px lightskyblue;
box-shadow:0 5px 5px -5px lightskyblue,
0 -5px 5px -5px lightskyblue;
}