如何使用 CSS 在元素的一侧添加框阴影？

如果您想为您的网站添加一些额外的效果，那么添加框阴影是一个不错的选择。框阴影可以帮助突出您的内容并使其更具吸引力。下面我们将介绍如何使用 CSS 在元素的一侧添加框阴影。

使用 box-shadow 属性

要在元素的一侧添加框阴影，我们可以使用 CSS 的 box-shadow 属性。box-shadow 属性可以接受多个值，以定义水平偏移、垂直偏移、模糊半径、颜色和 spread 半径等。

以下是一个基本示例：

.shadow {
  box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.75);
}

解释：

• 水平偏移：10px
• 垂直偏移：0px
• 模糊半径：5px
• spread 半径：0px
• 颜色：rgba(0,0,0,0.75)（黑色）

这将在元素的右侧添加一个 10 像素宽的黑色框阴影。

使用伪元素

为了在元素的左侧添加框阴影，我们可以使用伪元素 ::before 或 ::after。伪元素允许我们在元素内部添加一个虚拟的子元素，并为其设置样式。

以下是一个例子：

.shadow-left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 10px;
  box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.75);
}

解释：

• content: ""：设置伪元素的内容为空字符串，以创建一个虚拟的子元素。
• position: absolute：将伪元素的位置设置为相对于其第一个定位的祖先元素。
• top: 0；bottom: 0：将伪元素的高度设置为 100%。
• left: -10px：将伪元素的左侧定位到其父元素的左侧，再向左移动 10 像素。
• width: 10px：将伪元素的宽度设置为 10 像素。
• box-shadow：与前面的示例相同。

这将在元素的左侧添加一个 10 像素宽的黑色框阴影。请注意，伪元素需要设置 position 属性以便使其生效。

结论

在元素的一侧添加框阴影是一个相对简单的任务，我们可以使用 box-shadow 属性或伪元素来实现。我们鼓励您进行自己的实验，以使您的页面更具吸引力！