仅在元素右侧和左侧添加阴影效果

Question

我需要在一个元素的右侧和左侧制作一个box-shadow效果。它应该向上和向下逐渐变细并淡化。同时，它也不应该溢出到顶部和底部。

主要问题是我无法防止阴影溢出到元素的顶部和底部。

这是我现有的代码：

HTML ：

<div></div>

CSS :

div{
    box-shadow: 0px 0px 20px 0px #000000;
}

- Gopikrishna

---

“矩形”在<div>中并不是很不寻常... - Ry-

@false 我需要为一个 div 添加左右两侧的阴影... - Gopikrishna

尝试这个：http://www.paulund.co.uk/creating-different-css3-box-shadows-effects - K K

Answer 1

你需要使用两个box-shadow，一个用于左阴影，一个用于右阴影。你需要在同一个box-shadow属性中指定这两个box-shadow，并用逗号分隔它们。

box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;

两者都需要具有负的扩展值，以便它们比div的高度短，并且不会在顶部和底部溢出。
关于MDN上box-shadow的更多信息

输出：

你需要调整阴影的值，以适应你想要使用它的元素的大小。

div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}

<div></div>

- web-tiki

Answer 2

我认为最优雅的语义化方式一定是将该元素包裹在一个 div 中，使用 overflow-y: hidden; 和 padding: 0 [horizontal-spread-box-shadow]。这里有一个夸张的例子：

body {
  padding: 50px;
}

.parent {
  display: inline-block;
  border: 2px solid red;
  overflow-y: hidden;
  padding: 0 40px;
}

.children {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 40px #000;
  background: blue;
}

<div class="parent">
  <div class="children"></div>
</div>

- Loi Nguyen Huynh

Answer 3

使用margin来显示阴影。

div {margin:10px}

看这个

http://jsfiddle.net/nB5F6/4/

- budamivardi