我需要在某些block元素上创建一个盒子阴影,但仅(例如)在其右侧。我这样做的方法是将内部元素包裹box-shadow到外部元素中padding-right,overflow:hidden;因此阴影的其他三个侧面不可见。
block
box-shadow
padding-right
overflow:hidden;
有没有更好的方法来实现这一目标?喜欢box-shadow-right?
box-shadow-right
编辑 :我的意图是 只 创建阴影的垂直部分。repeat-y与规则的作用完全相同background:url(shadow.png)100% 0% repeat-y。
repeat-y
background:url(shadow.png)100% 0% repeat-y
是的,您可以使用 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,你可以用它来改变阴影的传播,使阴影看起来只在一侧。
-2px
这也使用阴影定位规则10px将其发送到右侧(水平偏移)并将0px其保持在元素下方(垂直偏移)。
10px
0px
5px是模糊半径:)
5px
在这里为你举例。