Css 上下弯边

我正在寻找一种方法来创建弯曲的顶部和底部边框，如图中的

div

。我已经尝试了这里提到的一些方法，但这取决于使用白色

div

s，在主

div

顶部使用

边界半径

，但是正如您在这张图像中看到的，它应该是透明的，以显示背景图像

---

实际上，使用CSS来实现这一点几乎是不可能的，如果您只需尝试一个简单的PNG图像，使用Photoshop、Google Images等创建，并创建一个正好如此大小的图像，然后在网站内使用它，您会感觉很好

---

您可以在创建图像时通过使用用于编辑图像的Adobe UI工具向图像添加透明度，也可以使用CSS中的alpha过滤器为图像设置透明度效果，以显示位于图像后面的元素（您想要的效果）

这可以使用

svg

要获得响应性，请删除

svg

的

宽度
和
高度
属性，添加
viewBox=“0 0 400 150”
，然后尝试更改
#图像
的
宽度
和
高度
svg
将响应其
宽度
和
高度

显示出反应灵敏的形状

-这将适用于除IE8之外的所有浏览器。


正文{
背景：水鸭；
}
#形象{
宽度：600px；
高度：300px；
位置：相对位置；
背景：url(http://lorempixel.com/600/300);
}
svg{
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
另一种可能性，不是使用剪辑，而是使用多个背景

技术上不如chipChocolate Response先进，只是提供了一个替代方案

.test {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 100px;
    border-radius: 10px;
    background-image: radial-gradient(circle at center -778px, 
        transparent 800px, rgba(255,0,0,0.4) 800px),
        radial-gradient(circle at center 828px, 
        transparent 800px, rgba(255,0,0,0.4) 800px);
    background-position: center top, center bottom;
    background-size: 100% 50%, 100% 50%;
    background-repeat: no-repeat;
}

想法是将元素分成两半，然后在每个部分设置一个与角位置匹配的径向渐变。手动调整梯度的最终位置

也可以采取相应的行动



正文{
宽度：100%；
身高：100%；
背景：url(http://placekitten.com/g/600/300);
}
.测试{
位置：绝对位置；
左：50px；
顶部：50px；
宽度：400px；
高度：100px；
边界半径：10px；
背景图像：径向梯度（中心圆圈-778px，
透明800px，rgba（255,0,0,0.4）801px，
径向梯度（圆心828px处的圆，
透明800px，rgba（255,0,0,0.4）801px）；
背景位置：中上、中下；
背景尺寸：100%50%，100%50%；
背景重复：无重复；
}
具有一个div、两个伪元素、边界半径和框阴影的另一种方法：


div{
宽度：70%；高度：150px；
保证金：20px自动；
位置：相对位置；
边界半径：10px；
溢出：隐藏；
不透明度：0.5；
}
div:before，div:after{
内容：''；
位置：绝对位置；
高度：100%；宽度：300%；
左-100%；
边界半径：100%；
盒影：0px 0px 0px 140px红色；
}
div:在{top:-146px；}之前
div:在{bottom:-146px；}之后
正文{背景：url（'http://lorempixel.com/output/people-q-c-640-480-1.jpg）；背景尺寸：封面；}
如果您将以类似于phtoshop的形状创建png图像，并将不透明度设置为大约70-75%，并将其设置为div标记的背景，则效果会更好。但是如何更改宽度和高度？我已经尝试了所有的方法，但都不起作用@Yasser-你需要的宽度和高度是多少？@Purag-。这将在Chrome上工作。@Yasser-。更改
#image
的
宽度
和
高度
，形状的宽度和高度也将更改。使用铬合金时，宽度和高度会毫无问题地更改。非常感谢。当渐变的两个步骤相同时，锯齿状边框通常会显示出来。我在代码段中增加了第二个值，但仍然有一些锯齿。。。我只是想玩弄一下价值观think@web-tiki的回答表明这在css中是非常可能的。