介绍

box-shadow是CSS中用于为元素添加阴影效果的属性。它可以让你控制阴影的大小、颜色、模糊度、偏移量和内外阴影等。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平方向的阴影偏移量。v-shadow：垂直方向的阴影偏移量。blur：阴影的模糊半径，可选参数。spread：阴影的扩展大小，可选参数。color：阴影的颜色。inset：可选参数，用于创建内阴影效果。

示例

.shadow {box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.inner-shadow {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);}.multiple-shadows {box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),-2px -2px 4px rgba(255, 255, 255, 0.3);}

解释

.shadow类的元素将具有一个向右下方偏移2像素、半径为4像素、颜色为黑色且透明度为0.5的阴影效果。.inner-shadow