CSS均匀四周阴影(光晕效果)
要实现阴影使用box-shadow属性,CSS语法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 必需参数,可以为0。以元素左上角为原点,在X轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量
v-shadow: 必需参数,可以为0。以元素左上角为原点,在Y轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量
blur:可选参数,阴影模糊的距离,这个参数默认值为0,这时阴影的边缘部分非常尖锐
spread:可选参数,这个参数设置元素四个方向上阴影的尺寸
color:可选,阴影的颜色
inset:可选,将外部阴影(outset)改为内部阴影
实现思路,box-shadow可以设置四组阴影样式,每组H,V正负相抵,然后再加上模糊距离即可。
完整代码:
.list-card { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), 2px -2px 5px rgba(0, 0, 0, 0.1), -2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(0, 0, 0, 0.1); }