1.text-shadow 属性我们可以为文本设置阴影效果
text-shadow: offset-x offset-y blur color;
语法说明如下:
offset-x:必填参数,设置阴影的水平偏移量,可以为负值;
offset-y:必填参数,设置阴影的垂直偏移量,可以为负值;
blur:可选参数,设置模糊的半径,值越大,模糊越大,阴影的边缘越模糊,不允许使用负值;
color:可选参数,设置阴影的颜色,如果省略或未指定该值,则采用 color 属性的值。
提示:使用 text-shadow 属性可以同时设定多组阴影效果,每组之间使用逗号分隔,定义的多组阴影效果会按照定义顺序依次罗列,第一个阴影在最上面,以此类推。另外,若要取消文本的阴影效果则可以将 text-shadow 属性的值设置为 none。
text-shadow: 1px 1px 2px black,
0 0 25px blue,
0 0 5px darkblue;
2.box-shadow 属性我们可以为 HTML 元素设置阴影效果
box-shadow: h-shadow v-shadow blur spread color inset;
语法说明如下:
h-shadow:必填参数,设置阴影水平方向的偏移量,可以为负值;
v-shadow:必填参数,设置阴影垂直方向的偏移量,可以为负值;
blur:可选参数,设置模糊的半径,值越大,模糊越大,阴影的边缘越模糊,不允许使用负值;
spread:可选参数,设置阴影的尺寸;
color:可选参数,设置阴影的颜色;
inset:可选参数,将默认的外部阴影 (outset) 改为内部阴影。
提示:与 text-shadow 属性相似,box-shadow 属性也可以同时设定多组阴影效果,每组之间使用逗号分隔,定义的多组阴影效果会按照定义顺序依次罗列,第一个阴影在最上面,以此类推。
box-shadow: 0px 0px 0px 3px #bb0a0a,
0px 0px 0px 6px #2e56bf,
0px 0px 0px 9px #ea982e;