当前位置:Gxlcms > html代码 > CSS2.1:有意思的box-shadow非典型性应用场景_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

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

box-shadow画圆.png

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

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

其他所有的圆 都是靠 第一个圆的 box-shadow,看代码:

看出端倪了嘛?它们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,这时候,阴影就和原元素一模一样大,如果扩展半径为正数,数字越大,阴影部分就越大,可以认为是它相对于原元素多出来的大小程度。所以这个参数可以用来控制阴影圆的大小。最后一个参数颜色,这就不用讲啦,就是阴影的颜色啦~!

人气教程排行