box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平偏移的距离,大于0表示向右偏移,小于0表示向左偏移,等于0等于没有水平偏移。该参数为必需参数。
v-shadow:阴影垂直偏移的距离,大于0表示向下偏移,小于0表示向上偏移,等于0表示没有垂直偏移。该参数为必需参数。
blur:阴影的模糊距离,该参数为可选参数。
spread:阴影的尺寸,该参数为可选参数。0px代表阴影和当前的实体一样大,大于0则表示大于实体的尺寸。
color:阴影的颜色,该参数为可选参数。参数的形式有:black(英文)、#000000(16进制)、RGB:(0,0,0)(10进制)等。
inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。
<!-- 圆点导航-->
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50px;
background: rgba(7,17,27,0.4);
margin-left: 8px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background-color: #fff;
}