如何在中心垂直挤压div？

Question

我需要垂直压缩一个div，使用css3，div需要有100％的宽度以适应完整的窗口，但我不知道如何。感谢。

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，它将“淡化”为黑色。

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浏览器以保持简单，请记住使用所有供应商前缀）