如何在中心垂直挤压 div？

Question

我需要在垂直方向上挤压 div，使用 css3，div 需要有 100% 的宽度才能完全容纳 window，但我不知道不知道怎么办。谢谢

http://i.stack.imgur.com/vqUs8.png

Answer 1

（已更新，由于 <div> 后面有图像的请求）

如果背景只有一种颜色（本例中为白色）的可能方法

div {
    background-color: #000;
    height: 200px;
    margin: 40px 0 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

div::before,
div::after {
    border-radius: 140px / 20px;
    content: "";
    display: block;
    height: 100px;    
    position: absolute;
    width: 100%;
}

div::before {
    box-shadow: 0 50px 0 10px #FFFFFF inset;
    bottom: -80px;
}

div::after {
    box-shadow: 0 -50px 0 10px #FFFFFF inset;
    top: -80px;
}

http://jsfiddle.net/kmjLqrq2/

上面的css使用了两个伪元素在<div>.

上面做了两个椭圆

现在的问题是，如果我们有一个 background-image 隐藏在 <div> 后面，我们的两个椭圆将重叠我们的图像。

输入radial-gradient:

我们现在可以改变我们的两个伪元素并给它们一个透明的椭圆作为 background-image 这将 "fade" 变成黑色。

div::before,
div::after {
    background-size: 100% 50px;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 25px;    
    position: absolute;
    width: 100%;
}

div::before {
    background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
    background-position: center bottom;
    top: -25px;
}

div::after {
    background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
    background-position: center top;
    bottom: -25px;
}

http://jsfiddle.net/kmjLqrq2/1/

（注意上面的例子只适用于Webkit浏览器，为了简单起见，请记住使用所有厂商前缀）