之前自学的时候，感觉box-shadow的参数好多，记不清每个参数的作用和效果是什么，在后面的学习中这个属性用的次数不是很多就一忘再忘，今天记录一下这个属性的各个参数的作用。

box-shadow

参数1: 水平阴影的位置；参数2：竖直阴影的位置；

水平位置和竖直位置可以为负值

<div></div>

        div{
            width: 200px;
            height: 200px;
            background: red;
            box-shadow: 50px 50px;
        }

效果：

参数3：模糊距离

模糊距离为npx时，向外模糊n/2px，向内模糊n/2px。

        div{
            width: 200px;
            height: 200px;
            background: red;
            box-shadow: 50px 50px 20px;
        }

效果：

参数4：阴影的尺寸

阴影尺寸为npx时，向座拓宽npx，向右拓宽npx，向上拓宽npx，向下拓宽npx.

宽拓宽2npx，高拓宽2npx。

        div{
            width: 200px;
            height: 200px;
            background: red;
            box-shadow: 50px 50px 0px 20px;
        }

结果为:

参数5：颜色，不用多说，阴影的颜色

参数6：inset 改为内部阴影

        div{
            width: 200px;
            height: 200px;
            background: red;
            box-shadow: 50px 50px 0px 0px yellowgreen inset;
        }

CSS盒阴影box-shadow的使用