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

希望有所幫助。