如何将边框半径应用于带有填充的图像？

Question

我有顶部和底部带有白色填充的图像。 请看附件。

当我尝试对这些图像使用border-radius ，我会得到扭曲的边缘。

在这种情况下我该如何解决这个问题？ 因为我无法在没有空白的情况下替换图像上的图像。

片段

Answer 1

如果您知道图像内边距的确切高度，您可以创建一个使用该图像作为容器上的背景图像的工作区。 如果您将容器的大小与“真实”图像大小完全相同，并正确定位背景图像，则可以在该容器上应用边框半径。

 .imagecontainer { background: url(http://nafantano.com/image/cache/catalog/toys/2017/img_8356____by_nafantano-d9aagdh-399x287.jpg) no-repeat 0 -10px; border-radius: 20px; display: inline-block; height: 230px; width: 300px; }

 <a href="#" class="imagecontainer"></a>

https://jsfiddle.net/tc29nedy/5/

Answer 2

你可以试试

 img { border-radius: 20px; }

 <img src="http://wallpapercave.com/wp/206q0ew.jpg" style="height:250px;">

Answer 3

这是我的建议：

<div class="image hovereffect">
                <a href="#">
                <img class="img-responsive" src="https://theimgurl" id="featured_55">
 </a></div>

在 css 中使用溢出：隐藏图像类，图像 img 需要一个 margin-top:-10。

.image {
  width:300px;
  height: 250px;
  border-radius:20px;
  overflow:hidden;

  }

.image img {
margin-top:-10px;

}