小编典典

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

all

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

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

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


阅读 78

收藏
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