如何在元素的一边添加一个box-shadow？ [英] How can I add a box-shadow on one side of an element?

问题描述

我需要在一些块元素上创建一个盒子阴影，但只有（例如）它的右侧。我这样做是用 box-shadow 将内部元素包装到外部 padding-right overflow：hidden; ，所以阴影的另外三边不可见。

实现这个？像 box-shadow-right ？

EDIT ：我的意图是创建 阴影的垂直部分。与的背景：url（shadow.png）100％0％repeat-y repeat-y

$ p

解决方案

是的，可以使用box-shadow规则的shadow spread属性：

  .myDiv {border：1px solid＃333; width：100px; height：100px; -webkit-box-shadow：10px 0 5px -2px＃888; box-shadow：10px 0 5px -2px＃888;}  

 < div class =myDiv>< / div>  

第四个属性是 -2px 是阴影扩展，你可以使用它来改变阴影的扩展，使它看起来阴影只在一侧。

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

5px 模糊半径：）

这里的例子。 p>

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; so the three other sides of the shadow are not visible.

Is there some better way to achieve this? Like box-shadow-right?

EDIT: My intentions are to create only the vertical part of the shadow. Exactly the same as what repeat-y of the rule background:url(shadow.png) 100% 0% repeat-y would do.

解决方案

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: 10px 0 5px -2px #888;
          box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

5px is the blur radius :)

Example for you here.

这篇关于如何在元素的一边添加一个box-shadow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！