总览
1.box-shadow的效果非常炫酷,能够完美地模仿影子的效果
一、原理
1.这里我们假设有1个光源,那么影子应该是左右只有一个、上下只有一个的,不可能是一个物体的左面右面都有影子,或者上下都有影子。
二、实际操作
1.语法:
box-shadow:参数1 参数2 参数3 参数4;
2.参数解析:
2.1 参数1:
如20px、-20px,它代表的是水平方向的阴影,正数阴影则在元素右侧,负数阴影则在元素左侧,并且设定阴影的宽度。
2.2 参数2:
如参数1,是水平方向上的阴影
2.3 参数3:
模糊度。是阴影的灵魂所在,可以设置如:20px、50px等等…参数越大,阴影效果就越模糊
2.4 参数4:
颜色。设置阴影的颜色。