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

小编典典

css

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

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

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

阅读 285

2020-05-16

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

2020-05-16