.shadow { box-shadow: 10px 0px 10px -5px rgba(0,0,0,0.5), -10px 0px 10px -5px rgba(0,0,0,0.5); }
上面的代码中,大家首先创建了一个名为shadow的类。其中box-shadow属性用于设置阴影效果。在这个属性中,大家设置了两个阴影效果,一个是在元素右侧,另一个是在左侧。
阴影效果的定义有4个参数:
- 横向偏移量:可以是正数或负数,正数表示向右,负数表示向左。
- 纵向偏移量:可以是正数或负数,正数表示向下,负数表示向上。
- 阴影半径:取正值,数值越大阴影范围越大,数值为0则阴影不可见。
- 阴影颜色:可以是预定义的颜色值,如red、blue等,也可以是rgba()函数来设置透明度。
设置两个阴影的时候,大家通过改变横向偏移量和阴影半径的正负性来实现在元素左右两侧产生阴影的效果。
最后,在需要添加阴影的元素中使用该类即可实现左右两侧均有阴影的效果。