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

Question

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

有没有更好的方法来实现这个目标？像 box-shadow-right 吗？

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

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 是模糊半径:)

Example for you here .