box-shadow(阴影)

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;
}