CSS2.1: 有意思的box-shadow非典型性应用场景_html/css_WEB-ITnose

最近对一些css很感兴趣。样式表的知识原理很容易被忽视，而且因为看似简单，所以更容易忘记。所以写下来咯~ box-shadow 这个东东，看起来好像很简单，就是阴影嘛！但是到底怎么用？是个神马规律？来来来，跟本猿一起学习一下。先看一个有意思的应用~ 这个月亮里面的阴影，是用box-shadow画的，很神奇吧。

box-shadow画圆.png

中间的一个圆，是靠下面两件事画的

绝对定位一个div (.moon:after) border-radius 和背景颜色设置

 .moon { position: relative; } .moon:after {      content: '';      display: block;          position: absolute;      width: 50px;      height:50px;      border-radius: 50%;      background: rgba(0, 0, 0, 0.1);      //其他的小圆(用box-shadow)... }

登录后复制

而 其他所有的圆 都是靠 第一个圆的 box-shadow，看代码：

     .moon { position: relative; }     .moon:after {          //其他的小圆(用box-shadow)...          box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),                      100px -60px 0 -7px rgba(0, 0, 0, 0.1),                      -70px 40px 0 -14px rgba(0, 0, 0, 0.1),                        -20px -50px 0 -15px rgba(0, 0, 0, 0.1),                      -20px 120px 0 -15px rgba(0, 0, 0, 0.1),                      50px 50px 0 -15px rgba(0, 0, 0, 0.1);     }

登录后复制

看出端倪了嘛？它们6个圆是阴影没错，但重点是它们是谁的阴影： 是第一个圆.moon:after的阴影！阴影是怎么一回事呢，阴影就是和偏移的，和原元素(谁的阴影)同样形状同样大小的一个东东，因为偏移，所以超过了原元素的部分，造成了阴影效果。那么box-shadow 后面的6句话，也就是对应着6个阴影，在这个场景中的表现也就是，6个圆。我们分析一下语法哈~

立即学习“前端免费学习笔记（深入）”；

box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),

登录后复制

前面两个参数120px 80px 是相对于原元素的定位，如果这两个参数是0px 0px那么刚好与原元素重合，没有偏移，也就没有阴影效果了。第三个参数0 ，就是模糊半径为0，也就是不模糊，这个值不能为负数。第四个参数是2px 就是 扩展半径，什么是扩展半径呢？就是如果这个值不设置的话，会默认为0，这时候，阴影就和原元素一模一样大，如果扩展半径为正数，数字越大，阴影部分就越大，可以认为是它相对于原元素多出来的大小程度。所以这个参数可以用来控制阴影圆的大小。最后一个参数颜色，这就不用讲啦，就是阴影的颜色啦~！