box-shadow理解与记忆
来源:互联网 发布:mac的作图软件 编辑:程序博客网 时间:2024/05/14 20:32
起念
用的时候总对参数的顺序记忆不清,以及具体要设置多少,主要是blur和spread这两个值的影响没有认真搞清楚
定义和用法
box-shadow: h-shadow v-shadow blur spread color inset;
理解
- 如同box-shadow这名字,可以理解为阴影也是个box,只是被放在了下面
- h-shadow v-shadow是这个阴影盒的左上角坐标位置
- blur官方称为模糊距离,它的实际操作是:模糊是个过渡的状态,那么相对于阴影盒的边缘哪里开始减弱呢,根据观察blur的值是边缘内外各占一半,见图一
- spread,是在原阴影盒的边缘向外增加对应的厚度,见图二
蹩脚总结
参数:xybs,渲染的过程可以这么理解:先单向厚度加spread后计算blur外加半
图一:分别为box-shadow:50px 50px 50px black/50px 50px black;
图二:
阅读全文
0 0
- box-shadow理解与记忆
- box-shadow与filter的drop-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow
- box-shadow:
- box-shadow
- box-shadow
- box-shadow
- HTML5结构标签、border-radius、box-shadow与text-shadow
- css中box-shadow属性与text-shadow属性
- box-shadow和text-shadow
- text-shadow,box-shadow使用
- (八)共享相同的依赖注入树
- bootstrap属性笔记
- 让站点支持markdown文本编辑器
- 操作 Python爬虫数据存储MySQL【3】爬取信息
- ESP8266 NONOS SDK2.0 自定义库编译
- box-shadow理解与记忆
- 视听技术之耳机麦克风二合一接口录音监听完美设置(smartAudio插口配置方法,解决电脑耳机插孔无反应)
- 计算机网络中的一些概念
- AIM Tech Round 4 (Div. 2) D. Interactive LowerBound
- EarMaster Pro Teacher6.2(Build 656TW) 中文版官网下载
- HDU6178 Monkeys【DFS】
- Atitit 减少财政支出----普通人如何蹭政府补贴措施 attilax大总结.docx
- Atitit 减少财政支出----获取商家商业机构的补贴措施 attilax大总结.docx
- Atitit 每个人都应该实施的互联网金融战略 attilax总结