仅在右侧和左侧的盒子阴影

Question

我只需要在元素的左右两侧制作一个盒子阴影。它应该褪色并变得更薄到顶部和底部。它也不应该在顶部和底部过流。

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

这就是我所拥有的：

HTML：

<div></div>

CSS：

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

Answer 1

您需要使用两个框阴影，一个用于左阴影，一个用于右阴影。您需要在同一个box-shadow属性中指定两个框阴影，并用昏迷分隔它们：

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

两者都需要具有负展开值，因此它们比div高度短，并且不会在顶部和底部溢出。

<强> DEMO

输出：

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

HTML：

<div></div>

CSS：

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

Answer 2

您需要将图像用于影子。我的意思是，左右阴影＆＃39;将需要两个图像，然后您可以定位在div的边缘以创建效果。显然我没有对此进行测试，可能需要稍微调整一下，但是你需要做这样的事情：

<style>
    .weird-image{
        height: 100px;
        width:100px;
        position: relative; /* do this so the absolutely positiond imgs are relative to this container */
    }

    .weird-image-left-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        left:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }

    .weird-image-right-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        right:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }
</style>
<div class="weird-image">
    <img class="weird-image-left-shadow" src="left-shadow.png"/>
    <img class="weird-image-right-shadow" src="right-shadow.png" />
    <p>My Actual Div Content</p>
</div>

Answer 3

我认为，最优雅的语义方式必须是使用overflow-y: hidden;和padding: 0 [horizontal-spread-box-shadow]将元素包装在div中。这是夸张的示例：

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>

Answer 4

使用边距显示阴影

div {margin:10px}

看看这个

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