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:
	 			//对应盒子上内边阴影，第一个值为左右偏移，第二个为上下偏移
                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;

阴影

https://www.cnblogs.com/libo-web/p/15705558.html

外发光

外发光效果

box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);