box-shadow:
认识各项值的：[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色阴影模糊半径：默认0，没有负值。值越大，模糊面积越大，阴影就越大越淡阴影扩展半径：默认0，正值，阴影扩大；负值，阴影收缩。阴影是不占据空间的，所以元素如果靠边，会有一部分看不见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<title>Title</title>
<style>
* {
margin: 0;
height: 0;
line-height: 1.5;
box-sizing: border-box;
}
body {width: 96%;height: 100vh;margin: 0 auto;display: flex; justify-content: space-between}
p {height: 30px}
small {
display: block;
height: auto;
min-height: 18px;
}
.wrapper {
width: 33%;
flex-grow: 0;
}
/*阴影扩展半径*/
.skittles {
position: relative;
width: 20px;
height: 20px;
margin: 100px auto;
border-radius: 50%;
background: #fff;
box-shadow:
0 0 0 10px rgb(243, 176, 189),
0 0 0 20px rgb(152, 242, 174),
0 0 0 30px rgb(247, 247, 167),
0 0 0 40px rgb(174, 192, 238),
0 0 0 50px rgb(252, 243, 219),
0 0 0 60px rgb(138, 217, 245),
0 0 0 70px rgb(209, 173, 240);
}
.skittles:after {
position: absolute;
right: -100%;
z-index: -1;
content: '';
width: 10px;
height: 140px;
background: #8b7575;
transform: rotate(-36deg);
border-radius: 10px;
}
/*阴影模糊半径同阴影扩展半径实现*/
.blurBox-1, .blurBox-2, .blurBox-3 {
display: inline-block;
overflow: hidden;
width: 100px;
height: 60px;
margin: 20px;
color: #fff;
text-align: center;
line-height: 60px;
background: rgb(237, 232, 154);
}
.blurBox-1 {box-shadow: 0 0 0 10px rgb(135, 226, 191)}
.blurBox-2 {box-shadow: 0 0 10px 10px rgb(135, 226, 191)}
.blurBox-3 {box-shadow: 0 10px 10px 10px rgb(135, 226, 191)}
/*特别的效果*/
.blurSpread-1, .blurSpread-2, .blurSpread-3 {
position: relative;
display: inline-block;
width: 120px;
height: 80px;
margin: 20px 0 0 20px;
color: #fff;
text-align: center;
line-height: 80px;
background: rgb(165, 163, 239);
}
/*只要设置了阴影扩展半径，就会应用在四边（阴影模糊半径同是），如果要设置具体一边阴影，那边阴影偏移量的绝对值要比阴影扩展半径绝对值大(阴影扩展半径要为负数，才能把其它边的缩回去)*/
.blurSpread-1 {
/*box-shadow: 0 10px 0 10px #486685;*/
/*box-shadow: 0 12px 8px -10px #486685;*/
}
.blurSpread-1:after {
position: absolute;
content: '';
z-index: -1;
right: 6px;
bottom: 5px;
width: 86%;
height: 15px;
box-shadow: 0 10px 10px 0px #000000b0;
transform: rotate(-5deg);
}
/*添加前后伪元素，使得阴影颜色加深，会比单个效果好些。*/
.blurSpread-2:after,
.blurSpread-2:before {
position: absolute;
content: "";
top: 70px;
left: 35px;
right: 35px;
z-index: -1;
box-shadow: 0 0 30px 8px #000;
border-radius: 100px/20px;
}
.blurSpread-3 {
box-shadow:
0px 1px 4px rgba(0,0,0,.2),
0px 0px 20px rgba(0,0,0,0.3) inset;
}
.blurSpread-3:before,
.blurSpread-3:after {
position: absolute;
content: '';
z-index: -1;
bottom: 15px;
left: 5px;
width: 45%;
height: 20%;
box-shadow: 0 15px 10px rgba(0,0,0,.8);
transform: rotate(-5deg);
}
.blurSpread-3:after {
left: auto;
right: 5px;
transform: rotate(5deg);
}
</style>
</head>
<body>
<div class="wrapper">
<p>阴影扩展半径实现彩虹糖：</p>
<div class="skittles"></div>
</div>
<div class="wrapper">
<p>阴影模糊半径实现：</p>
<small>  对第3个解释：设置y值，往下移10px，故原本阴影扩展半径在-y方向就没有了，看起来还有一点，是因为阴影模糊半径有值</small>
<small>1、box-shadow: 0 0 0 10px rgb(234, 182, 191)--第3个值</small>
<small>2、box-shadow: 0 0 10px 10px rgb(234, 182, 191)--第4个值</small>
<small>3、box-shadow: 0 10px 10px 10px rgb(234, 182, 191)--第2个值</small>
<div class="blurBox-1">1</div>
<div class="blurBox-2">2</div>
<div class="blurBox-3">3</div>
</div>
<div class="wrapper">
<p>特别的阴影设置：</p>
<small>  当盒子没有宽高时，只设置阴影模糊半径没有效果，而加上阴影扩展半径则可以显示阴影</small>
<small>  为一个元素(width:100px)添加伪元素时，其伪元素若没有设置宽度值(已设置了绝对定位），
在没有设置left,或right值情况下，会有默认值，两者并不等，但加总为父元素的宽（100px）；如果设置了
left和right值加总小于父元素宽，则伪元素默认宽度即父元素宽度减去left、right值（即100px-left-right）,
若left+right值大于父元素宽度，则伪元素的宽度为0
</small>
<div class="blurSpread-1">1</div>
<div class="blurSpread-2">2</div>
<div class="blurSpread-3">3</div>
</div>
</body>
</html>