仅剪辑图像背景/圆角 CSS答案

【问题标题】：Clip image background/ rounded corner CSS only仅剪辑图像背景/圆角 CSS
【发布时间】：2017-01-14 14:48:24
【问题描述】：

我在网站设计中有一部分，我不知道如何更好地实施。

这是页面的一部分。您可以根据指南（引导网格）查看内容的位置。最重要的部分是底部和顶部的圆形边框。

我尝试使用border 属性，但无法获得预期的结果。

有没有办法只使用 CSS 实现以下效果，不使用剪辑、画布等现代浏览器功能...，以支持移动浏览器。
或者只有从图形编辑器中以适当形状导出背景的唯一方法？

如果有任何帮助，我将不胜感激。

【问题讨论】：

最简单的解决方案可能是创建具有透明背景的图像。
你的意思是已经设置了形状的图像？
是的。这可能是每个人都会采用的最简单的方法。
绝对是@JinuKurian 提供的最简单的解决方案 - 但您也可以考虑使用平面 bg 图像，然后在顶部放置第二个 div，顶部和底部边框较粗且略微圆润。

标签： html image twitter-bootstrap css

【解决方案1】：

这是我能得到的最接近的：

div {
  position:absolute;
  left:40px;
  top:40px;
  width:500px;
  height:300px;
  border-radius:100%/20px;
  background: blue url(https://placeimg.com/500/300/any);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢您的回答，您能否解释一下border-radius 是如何使用百分比和像素计算的？（什么是 100% ）在这种情况下？跨浏览器对这种方法的支持程度如何？