阴影也分为盒子阴影和文字阴影,接下来请看如何使用
盒子阴影:box-shadow
盒子阴影有6个参数,其中有三个是必要的,分别是:
水平偏移量,正值向右,负值向左
垂直偏移量,正值向下,负值向上
阴影颜色
假如,写一个div,高度40,给向下的阴影,如下图:
在这里插入图片描述
从图中可以看出效果已经出来了
接下来是三个可选的参数,分别是:
模糊半径(可选)数值越大越模糊,0表示实心阴影
阴影尺寸(可选)数值越大尺寸越大
内/外阴影(可选) 外部:outset 内部:inset
我们再给这个div盒子,添加3个参数,让它有凹陷的感觉,如下图:
先添加内部阴影的属性
在这里插入图片描述
再添加模糊半径,让它可以模糊到大部分范围
在这里插入图片描述
最后添加阴影尺寸,让它的尺寸变大,加深感觉
在这里插入图片描述
这样就完成了,现在你已经了解盒子阴影的6个参数了。
它们的顺序是:
1:水平偏移量,正值向右,负值向左
2:垂直偏移量,正值向下,负值向上
3:模糊半径(可选)数值越大越模糊,0表示实心阴影
4:阴影尺寸(可选)数值越大尺寸越大
5:阴影颜色
6:内/外阴影(可选) 外部:outset 内部:inset
1
2
3
4
5
6
文字阴影:box-shadow
文字阴影只有4个参数,其中有三个是必要的,和盒子阴影相同,分别是:
水平偏移量,正值向右,负值向左
垂直偏移量,正值向下,负值向上
阴影颜色
假如,写一段文字,让它有重叠的效果,如下图:
在这里插入图片描述
重叠的效果已经出来了
接下来是最后一个可选的参数:
模糊半径(可选)
用模糊半径让他变成影子一样,效果图:
在这里插入图片描述
现在你也了解文字阴影的用法了
它们的顺序是:
1:水平偏移量
2:垂直偏移量
3:模糊半径(可选)
4:阴影颜色
1
2
3
4
你已经掌握了盒子阴影和文字阴影的用法了,可以做出炫酷的文字和层次感的排版了