标签：box height rgb 10px shadow 阴影
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>
标签：box,height,rgb,10px,shadow,阴影 来源： https://www.cnblogs.com/L-xjco/p/13818891.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。