我需要 CSS 中的这个图像，并且在这个边框内需要一个背景图像。
我努力了
border-radius:0 0 50% 50%;
-webkit-border-radius:0 0 50% 50%;
但没有得到所需的形状。
任何帮助，将不胜感激。
边界半径：
您可以在 X 轴和 Y 轴上为元素指定不同的边框半径值，以获得带有边框和背景图像的弯曲底侧。
.curved-border {
height: 200px;
width: 400px;
background: url(http://lorempixel.com/400/200/nature/1);
border: 3px solid;
box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */
margin-bottom: 4px;
}
.sample1 {
border-radius: 0% 0% 150% 150%/0% 0% 40% 40%;
}
.sample2 {
border-radius: 0% 0% 100% 100%/0% 0% 30% 30%;
}
<div class='curved-border sample1'></div>
<div class='curved-border sample2'></div>
Note:正如您在评论中所观察到的，当我们使用这种方法甚至设置更高的值时，底部边框确实会变得更薄border-bottom-width没有帮助。为了克服这个问题（在一定程度上），你可以添加一个虚拟的box-shadow（与边框颜色相同）。
box-shadow: inset 0px -1px 0px black;
使用剪辑路径：
您还可以使用背景图像创建此形状clip-path（以及内联 SVG）。对于这种特殊情况，我认为使用它并没有太多优势border-radius方法（事实上，这是一个缺点，因为 IE 不支持），但对于复杂的形状，SVG 允许对曲线、半径等进行更多控制。
.curved-border {
position: relative;
height: 200px;
width: 400px;
background: black;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
.curved-border:before {
position: absolute;
content: '';
height: calc(100% - 6px);
width: calc(100% - 6px);
top: 3px;
left: 3px;
background: url(http://lorempixel.com/400/200/nature/3);
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='curved-border'></div>
<svg width='0' height='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M0,0 0,0.8 A.5,0.2 0 1,0 1,0.8 L1,0z' />
</clipPath>
</defs>
</svg>
使用 SVG 路径：
这也可以通过使用 SVG 来实现path代替clip-path。浏览器对此的支持比剪辑路径版本更好。
.curved-border {
position: relative;
height: 200px;
width: 400px;
}
svg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
svg path {
fill: url(#g-image);
stroke: black;
stroke-width: 4;
}
<div class='curved-border'>
<svg viewBox='0 0 200 100' preserveAspectRatio='none'>
<defs>
<pattern id='g-image' width='200' height='100' patternUnits='userSpaceOnUse'>
<image xlink:href='http://lorempixel.com/400/200/nature/4' width='200' height='100' />
</pattern>
</defs>
<path d='M2,2 2,78 A98,20 0 1,0 198,78 L198,2z' vector-effect='non-scaling-stroke' />
</svg>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
