【box-shadow盒子内边阴影&外阴影】

box-shadow属性

用于设置盒子阴影效果

---

盒子外阴影

box-shadow：[左右阴影偏移距离(px)] [上下阴影偏移距离(px)] [模糊程度(px)] [模糊距离(px)] [颜色]

[左右阴影偏移距离(px)] ---- 正数-阴影偏向盒子右端，负数-阴影偏向盒子左端
[上下阴影偏移距离(px)] ---- 正数-阴影偏向盒子下端，负数-阴影偏向盒子上端
[模糊程度(px)] ---- 数值越大-表示盒子阴影的模糊程度越高，负数-阴影模糊程度越小
[模糊距离(px)] ---- 数值越大-模糊的范围就越大
[颜色] ---- 设置模糊颜色

• 例

 #box {
            width: 100px;
            height: 100px;
            margin: 100px;
            border: 1px solid #ccc;
            box-shadow: 10px 10px 10px 10px #ccc;
	}

---

box-shadow内边阴影

	{
	 box-shadow:
	 			//对应盒子上内边阴影，第一个值为左右偏移，第二个为上下偏移
                inset 0 5px white,
                //对应盒子右内边阴影，第一个值为左右偏移，第二个为上下偏移
                inset 0 -5px #ccc,
                //对应下内边阴影，第一个值为左右偏移，第二个为上下偏移
                inset -5px 0 #d7d7d7,
                //对应做内边阴影，第一个值为左右偏移，第二个为上下偏移
                inset 5px 0 #d7d7d7;
	}

• 第三个值表示对应边的阴影颜色
• 有顺序要求，新设置的阴影会盖在后设置阴影上面

—— 例

 width: 120px;
            height: 120px;
            margin: 0 16px;
            padding: 10px 5px;
            box-sizing: border-box;
            list-style: none;
            border-radius: 10%;
            box-shadow:
                inset 0 5px white,
                inset 0 -5px #ccc,
                inset -5px 0 #d7d7d7,
                inset 5px 0 #d7d7d7;
            background-color: #e7e7e7;