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

Question

我需要在一些 block 元素上创建一个框阴影，但仅（例如）在其右侧。我这样做的方法是用 box-shadow 将内部元素包裹到带有 padding-right 和 overflow:hidden; 的外部元素中，这样阴影的另外三个边是不可见的.

有没有更好的方法来实现这一目标？比如 box-shadow-right ？

编辑：我的意图是 只 创建阴影的垂直部分。与规则 background:url(shadow.png) 100% 0% repeat-y repeat-y --- 完全相同。

原文由 tillda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以使用 box-shadow 规则的 shadow spread 属性：

 .myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

 <div class="myDiv"></div>

那里的第四个属性 -2px 是阴影扩散，你可以用它来改变阴影的扩散，使阴影看起来只在一侧。

这也使用了阴影定位规则 10px 将其发送到右侧（水平偏移）和 0px 将其保持在元素下方（垂直偏移。）

5px 是模糊半径:)

在这里为你举例。

原文由 Kyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

clip-path 现在（2020 年）是在元素的特定侧面实现框阴影的最简单方法之一， 尤其是当所需效果是特定边缘的“干净切割”阴影时（我相信这是 OP本来是找的），像这样：

 .shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

 <div class="shadow-element"></div>

…而不是像这样减弱/减少/变薄的阴影：

 .shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

 <div class="shadow-element"></div>

只需将以下 CSS 应用于相关元素：

 box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);

在哪里：

• Tpx 设置顶部边缘的阴影可见性
• Rpx 对
• Bpx 底部
• Lpx 左

为应隐藏阴影的任何边缘输入 0 值，为应显示阴影的任何边缘输入负值（与框阴影模糊半径 - Xpx ）。

原文由 Luke 发布，翻译遵循 CC BY-SA 4.0 许可协议