.image { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
在上面的代码中,大家使用了CSS的box-shadow属性来实现图片周边阴影效果。box-shadow属性接受四个参数,分别是:
- X轴偏移量:水平方向的偏移量(正数向右,负数向左)
- Y轴偏移量:竖直方向的偏移量(正数向下,负数向上)
- 模糊半径:阴影的模糊半径,值越大越模糊
- 阴影颜色:阴影的颜色值,可以使用rgba()函数调整透明度
当大家需要使用多个阴影时,可以使用逗号(,)分割不同阴影的参数值。例如:
.image { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); }
在上面的代码中,大家定义了两个不同的阴影效果,分别为10像素模糊半径和20像素模糊半径,颜色值不同,分别为半透明和深色。
除了box-shadow属性外,还有其他的CSS属性可以用来实现图片周边阴影效果,例如text-shadow和inset。其中,text-shadow属性可以用来给文字添加阴影效果;inset属性可以用来使阴影效果在图片内部而非周边。