box-shadow单边阴影的实现

Box-shadow 可以在多种情况下为元素添加阴影效果，包括单边阴影。单边阴影可以为元素添加美观的高亮或深度感。

下面是实现单边阴影的完整攻略：

使用 box-shadow 和 inset 属性

在元素上添加 box-shadow 属性，并使用 inset 属性，可以创建单边阴影。inset 属性指定阴影显示在元素内部，而不是在元素周围。

.shadow {
  box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.5);
}

上面的示例将在元素底部创建一个黑色、10像素高的阴影。具体来说，它使用以下值：

• inset 表示阴影是内部的。
• 0px 表示阴影沿 X 轴和 Y 轴的偏移量是零，因此阴影位于元素正中央。
• -10px 表示阴影垂直方向上的偏移量，即在底部创建一个阴影。正值将产生在元素顶部的阴影。
• 10px 表示阴影的模糊半径，控制阴影的模糊程度。数字越高，阴影的边缘越柔和。
• -10px 表示阴影的扩散半径，控制阴影的大小。数字越高，阴影越大。
• rgba(0,0,0,0.5) 表示阴影的颜色和透明度。这里是黑色的阴影。

使用伪元素实现单边阴影

除了使用 box-shadow 和 inset 属性，我们也可以使用伪元素实现单边阴影。下面是一个例子：

.shadow::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  box-shadow: 0 -4px 8px -5px rgba(0, 0, 0, 0.3);
}

上面的示例使用伪元素来添加一个在底部的阴影。具体说明如下：

• ::before 是一个伪元素选择器，可以创建一个在元素内容之前的伪元素。
• content: "" 表示伪元素没有内容。
• position: absolute 表示伪元素相对于其最近的已定位的祖先元素进行定位，并根据 bottom: 0 和 left: 0 的值在元素底部、顶部分别距离左边和顶部0px。
• width: 100% 和 height: 5px 表示伪元素和元素一样宽，并且高度为5像素。
• box-shadow: 0 -4px 8px -5px rgba(0, 0, 0, 0.3) 表示在底部创建一个黑色、5像素高的阴影。其中，0是X轴偏移量，-4px是Y轴偏移量，8px是模糊半径，-5px是扩散半径，rgba(0, 0, 0, 0.3)是阴影的颜色和透明度。

总之，通过使用 box-shadow 和 inset 属性或使用伪元素等方式实现单边阴影都是可以的。具体选择哪种方式，需要根据实际情况来决定。