CSS阴影box-shadow,深入理解
css中可以写阴影的属性有:字体阴影(text-shadow)、盒阴影(box-shadow)、阴影(filter:drop-shaddow)。接下来带大家一起来学习这些属性的用法和要点。
盒子阴影(box-shadow)
语法:box-shadow: 水平偏移(px),垂直偏移(px),阴影模糊度(px),阴影大小(px),阴影颜色值,内阴影(inset);可以设置多重阴影
前端学习交流群 330336289 邀请码(联盟)
垂直偏移(px):效果展示
水平偏移(px):效果展示
阴影模糊度(px):效果展示
阴影大小(px):效果展示
阴影颜色值(px):效果展示
内阴影(inset),默认为外阴影,但是没有(outset这个值):效果展示
多重阴影(用","分开):效果展示、
文字阴影(box-shadow)
语法:text-shadow: 水平|垂直|模糊度|颜色值;
注意:文字阴影(box-shadow)--①可以设置多个阴影②不能设置内阴影③没有阴影大小
字体阴影:效果展示
滤镜中的阴影(filter:drop-shadow)
语法:filter:drop-shadow:(x偏移, y偏移, 模糊大小, 色值);
注意:①filter:drop-shadow是真正意义上的投影②没有内阴影③不能写多个阴影④背景为透明时不会有阴影(box-shadow有)
怎么区分filter:drop-shadow阴影和box-shadow?下面通过写用边框写的三角形来区分这两个属性,直接看图:
filter:drop-shadow:效果图展示
今天的分享就到这儿啦~最后还是要推荐下小编的前端学习群: 330336289,邀请码(联盟),不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份2018最新的前端和0基础入门教程,欢迎初学和进阶中的小伙伴。每天晚上20:00都会开直播给大家分享前端知识和路线方法,群里会不定期更新最新的教程和学习方法,如果你是正在学习前端的小伙伴可以加入学习哦