不起眼的css box-shadow 属性

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

• inset: 默认阴影在边框外。使用 **inset** 后，阴影在边框内（即使是透明边框），背景之上内容之下。
•  offset-x，offset-y: 这是头两个 length值，用来设置阴影偏移量。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。 offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看length。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。
• blur-radius: 这是第三个length值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
• spread-radius : 这是第四个length值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
• color : 相关事项查看color 。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

/* html */
<div></div>
/* css */
.box {
margin: 80px;
width: 150px;
height: 150px;
background-color: lightgreen;
/* 顺序为: offset-x, offset-y, blur-radius, spread-radius, color */
/* blur-radius, spread-radius 是可选的 (默认为 0) */
box-shadow: 120px 80px 50px 20px #0ff;
}

/* html */
<div>
<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
</div>
/* css */
div {
width: 400px;
padding: 6px;
box-shadow:
inset 0 -3em 3em rgba(0, 0, 0, 0.1),
0 0 0 2px rgb(255, 255, 255),
0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

/* html */
<div></div>
/* css */
div {  
width: 40px;  
height: 40px;  
border-radius: 50%;  
background-color: #fff;  
box-shadow: 0 0 60px 30px #fff,    
0 0 100px 60px #f0f,    
0 0 140px 90px #0ff;
}

/* html */
<div></div>
/* css */
div {  
width: 400px;  
height: 200px;  
background-color: #fff;  
border: solid 2px #fff;  
box-shadow: inset 60px 0 120px #f0f, 
inset -60px 0 120px #0ff;
}

/* html */
<div></div>
/* css */
div {  
width: 300px;  
height: 300px;  
border-radius: 50%;  
box-shadow: inset 0 0 50px #fff,    
inset 20px 0 80px #f0f,    
inset -20px 0 80px #0ff,    
inset 20px 0 300px #f0f,    
inset -20px 0 300px #0ff,    
0 0 50px #fff,    
-10px 0 80px #f0f,   
10px 0 80px #0ff; 
}

/* html */
<div></div>
/* css */
div {  
width: 300px;
height: 50px;
background-color: #23fbed;
border: solid 2px #a3fff1;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3) inset;
}

/* html */
<div class="shadow">  
<div class="vertical-line"></div>
</div>
/* css */
/* 1.准备基本的盒子大小 */
.shadow {  
position: relative;  
width: 300px;  
height: 200px;  
background: #CCC;
}
.vertical-line {  
position: relative;  
height: 96%;  
width: 0;  
top: 2%;  
margin: 0 auto;  
border: 1px dashed #808080;
}
/* 2.添加阴影样式，在元素底部左右两边各生成一个阴影, 阴影应该是垂直向下, 和模糊,  */
.shadow::before,
.shadow::after {  
content: "";  
position: absolute;  
bottom: 20px;  
left: 10px;  
width: 50%;  
height: 10%;  
/*  阴影太厚或边缘淡化 0 20px 30px */ 
box-shadow: 0 20px 30px rgba(125, 125, 125, 0.9);  
/* 左右阴影倾斜,且边缘部分应该淡化倾斜 */  
transform: rotate(-5deg);  
/* 设置阴影层级 */  
z-index: -1;
}
.shadow::after {  
right: 10px;  
left: auto;  
transform: rotate(5deg);
}