天天看点

CSS阴影box-shadow,深入理解

css中可以写阴影的属性有:字体阴影(text-shadow)、盒阴影(box-shadow)、阴影(filter:drop-shaddow)。接下来带大家一起来学习这些属性的用法和要点。

盒子阴影(box-shadow)

CSS阴影box-shadow,深入理解

语法:box-shadow: 水平偏移(px),垂直偏移(px),阴影模糊度(px),阴影大小(px),阴影颜色值,内阴影(inset);可以设置多重阴影

前端学习交流群 330336289 邀请码(联盟)

垂直偏移(px):效果展示

CSS阴影box-shadow,深入理解

水平偏移(px):效果展示

CSS阴影box-shadow,深入理解

阴影模糊度(px):效果展示

CSS阴影box-shadow,深入理解

阴影大小(px):效果展示

CSS阴影box-shadow,深入理解

阴影颜色值(px):效果展示

CSS阴影box-shadow,深入理解

内阴影(inset),默认为外阴影,但是没有(outset这个值):效果展示

CSS阴影box-shadow,深入理解

多重阴影(用","分开):效果展示、

CSS阴影box-shadow,深入理解

文字阴影(box-shadow)

语法:text-shadow: 水平|垂直|模糊度|颜色值;

注意:文字阴影(box-shadow)--①可以设置多个阴影②不能设置内阴影③没有阴影大小

字体阴影:效果展示

CSS阴影box-shadow,深入理解

滤镜中的阴影(filter:drop-shadow)

语法:filter:drop-shadow:(x偏移, y偏移, 模糊大小, 色值);

注意:①filter:drop-shadow是真正意义上的投影②没有内阴影③不能写多个阴影④背景为透明时不会有阴影(box-shadow有)

怎么区分filter:drop-shadow阴影和box-shadow?下面通过写用边框写的三角形来区分这两个属性,直接看图:

filter:drop-shadow:效果图展示

CSS阴影box-shadow,深入理解
CSS阴影box-shadow,深入理解

今天的分享就到这儿啦~最后还是要推荐下小编的前端学习群: 330336289,邀请码(联盟),不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份2018最新的前端和0基础入门教程,欢迎初学和进阶中的小伙伴。每天晚上20:00都会开直播给大家分享前端知识和路线方法,群里会不定期更新最新的教程和学习方法,如果你是正在学习前端的小伙伴可以加入学习哦