CSS曲线渐变和盒子阴影

Question

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

这是我一直在努力的jsFiddle。 “顶级”类的CSS永远不会被应用。 “底层”类的CSS似乎工作正常。

http://jsfiddle.net/kXuQY/

HTML：

<div class="drop-shadow top bottom">
  Content here.
</div>

CSS：

.drop-shadow {
/** Create container.  Box-shadow here is to color the inside of the container **/
 position:relative;
 width:50%;
 background: none repeat scroll 0 0 #FFFFFF;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 padding:3em;
 margin: 2em 20px 4em;
 text-align:center
}

.top:before,
.top:after {
  /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
 content:"";
 position:absolute;
 z-index:-1;
 top:20px;
 left:0;
 width:40%;
 height:1em;
 max-width:150px;
 -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform:rotate(70deg);
 -moz-transform:rotate(70deg);
 -o-transform:rotate(70deg);
 transform:rotate(70deg);
}

.top:after{
  /**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
 right:0;
 left:auto;
 -webkit-transform:rotate(-70deg);
 -moz-transform:rotate(-70deg);
 -o-transform:rotate(-70deg);
 transform:rotate(-70deg);
}

.bottom:before,
.bottom:after {
  /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
 content:"";
 position:absolute;
 z-index:-2;
 top:90px;
 left:0;
 width:10%;
 max-width:150px;
 -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform:rotate(99deg);
 -moz-transform:rotate(99deg);
 -o-transform:rotate(99deg);
 transform:rotate(99deg);
}

.bottom:after{
  /**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
 right:0;
 left:auto;
 -webkit-transform:rotate(-99deg);
 -moz-transform:rotate(-99deg);
 -o-transform:rotate(-99deg);
 transform:rotate(-99deg);
}

Answer 1

您可以使用CSS属性之前和之后来实现这一点。 看看这个：http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

另一种方式：

<强> HTML：

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

<强> CSS：

#box:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}
#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: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 {
    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%;
}

参考：http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html

希望有所帮助。