当前位置:  首页  >  前端开发  >  HTML

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

CSS2.1:有意思的box-shadow非典型性应用场景
最近对一些css很感兴趣。样式表的知识原理很容易被忽视,而且因为看似简单,所以更容易忘记。所以写下来咯~ box-shadow 这个东东,看起来好像很简单,就是阴影嘛!但是到底怎么用?是个神马规律?来来来,跟本猿一起学习一下。先看一个有意思的应用~ 这个月亮里面的阴影,是用box-shadow画的,很神奇吧。 box-shadow画圆.png 中间的一个圆,是靠下面两件事画的
  1. 绝对定位一个p (.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,这时候,阴影就和原元素一模一样大,如果扩展半径为正数,数字越大,阴影部分就越大,可以认为是它相对于原元素多出来的大小程度。所以这个参数可以用来控制阴影圆的大小。最后一个参数颜色,这就不用讲啦,就是阴影的颜色啦~!
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | 凯发国际娱乐 | 凯发国际娱乐下载 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有