Javascript CSS曲线渐变和长方体阴影

CSS可以用来使内容容器的左右边缘看起来像这个图像吗？如果可能的话，我一直在想一种不用图像的方法

这是我一直在研究的JSFIDLE。“top”类的CSS永远不会被应用。“底层”类的CSS似乎工作正常

HTML:

---

可以使用

：：before

和

：：after

伪元素来实现效果，请参见

例如：（）

HTML:

<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>

#box:before, #box:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    top: 80%;
    transform: rotate(-3deg);
    width: 50%;
    z-index: -1;
}

#box:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}

#box {
    background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
    margin: 60px auto;
    padding: 2em 1.5em;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 60%;
}

---

看看这个，它添加了一个底部卷曲的外观，但它可能会帮助您了解如何让它在左侧和右侧工作。谢谢，我用到目前为止的JSFIDLE和css更新了这个问题。我认为这很接近，但仍然有一些问题。谢谢你的提示！我已经用JSFIDLE和CSS更新了这个问题。这里又有麻烦了：我的“top”类的CSS似乎被覆盖了，或者是什么原因导致它没有被应用。@Mdd-您可以做的是，创建3个单独的div，然后（使用上面的代码）对top和bottom div应用阴影（第一个div的top shadow和第三个div的bottom shadow）。让中间的内容保持原样。最后，定位所有的div，使整个东西看起来像一个统一的盒子。谢谢！我更新了小提琴，现在知道该怎么办了。再次感谢！很高兴听到这个消息。不过有一件事，我建议将“底部”变换改为大约107度，而不是99度，因为阴影看起来在底部被99度截断了。

<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>

#box:before, #box:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    top: 80%;
    transform: rotate(-3deg);
    width: 50%;
    z-index: -1;
}

#box:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}

#box {
    background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
    margin: 60px auto;
    padding: 2em 1.5em;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 60%;
}