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

小编典典

all

我需要在某些block元素上创建一个盒子阴影，但仅（例如）在其右侧。我这样做的方法是将内部元素包裹box-shadow到外部元素中padding-right，overflow:hidden;因此阴影的其他三个侧面不可见。

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

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

阅读 81

2022-03-13

共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是shadow spread，你可以用它来改变阴影的传播，使阴影看起来只在一侧。

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

5px是模糊半径:)

2022-03-13