box-shadow实现单边阴影、多边阴影、呼吸动画效果

1.box-shadow属性分析

下图是w3cschool对于box-shadow属性的解释

h-shadow:阴影在X轴的移动距离，正数向X轴正方向移动，负数向X轴负方向移动
v-shadow:阴影在Y轴的移动距离，正数向Y轴正方向移动，负数向Y轴负方向移动
blur:模糊距离，不能为负数
spread:阴影尺寸，正数时阴影扩大，负数时阴影缩小

2.各种单边阴影、多边阴影的实现

需要注意的是，因为模糊距离（blur）的值不为0，所以正常情况下，未设置阴影的边界也会出现阴影，这时候需要设置spread为负数，抵消模糊距离的宽度。

        .top {
            box-shadow: 0px -10px 10px -10px #00ff00;
        }

        .bottom {
            box-shadow: 0px 10px 10px -10px #00ff00;
        }

        .left {
            box-shadow: -10px 0px 10px -10px #00ff00;
        }

        .right {
            box-shadow: 10px 0px 10px -10px #00ff00;
        }

        .left-top {
            box-shadow: -10px -10px 10px -10px #00ff00;
        }

        .right-top {
            box-shadow: 10px -10px 10px -10px #00ff00;
        }

        .left-bottom {
            box-shadow: -10px 10px 10px -10px #00ff00;
        }

        .right-bottom {
            box-shadow: 10px 10px 10px -10px #00ff00;
        }

        .no-top {
            /* 左下 + 右下 */
            box-shadow: -10px 10px 10px -10px #00ff00, 10px 10px 10px -10px #00ff00;
        }

        .no-bottom {
            /* 左上 + 右上 */
            box-shadow: -10px -10px 10px -10px #00ff00, 10px -10px 10px -10px #00ff00;
        }

        .no-left {
            /* 右上 + 右下 */
            box-shadow: 10px -10px 10px -10px #00ff00, 10px 10px 10px -10px #00ff00;
        }

        .no-right {
            /* 左上 + 左下 */
            box-shadow: -10px 10px 10px -10px #00ff00, -10px -10px 10px -10px #00ff00;
        }

        .allside{
            box-shadow: 0px 0px 10px 0px #00ff00;
        }

3.呼吸效果

	.huxi{
	    animation: huxi 2s linear infinite alternate;
	}
	
	@keyframes huxi {
	    from {
	        box-shadow: 0px 0px 10px 0px #00ff00;
	    }
	
	    to {
	        box-shadow: 0px 0px 30px 0px #00ff00;
	    }
	}