CSS边框半径属性不起作用[重复]答案

【问题标题】：CSS border-radius Property Not Working [duplicate]CSS边框半径属性不起作用[重复]
【发布时间】：2015-09-12 07:32:39
【问题描述】：

我在 Tumblr 上运行我的网站。我刚刚添加了 CSS Border-Radius 属性并将其设置为 20px 用于具有特定 ID 的所有图像。但是，如您所见，图像右侧的角没有正确圆角，但左侧的角是。

CSS 代码如下所示：

#articleimage {
    float:left;
    padding-right: 10px;
    padding-bottom: 1px;
    width: 400px;
    border-radius:20px;
}

我已确定问题是由右侧的填充引起的，但我需要该 CSS 属性。我怎样才能停止这种冲突？

查看截图：http://i.stack.imgur.com/es0aa.png

【问题讨论】：

你能加你的html吗？ 对于所有具有特定 ID 的图像，这让我感到困惑，因为在这种情况下，您必须使用类而不是使用 ID！
AND id 无论如何都必须是唯一的。所以 对于所有具有特定 ID 的图像 会生成无效的 HTML。为什么需要padding-right？
尝试稍微减小宽度
为什么需要 padding 属性？您是否正在尝试从其他内容中添加喘息空间？如果是这样，margin 是更好的选择。
需要 padding 属性来将文本从图像的一侧隔开。

标签： html css image tumblr

【解决方案1】：

尝试更改边距的填充：

#articleimage {
    float:left;
    margin-right: 10px;
    margin-bottom: 1px;
    width: 400px;
    border-radius:20px;
}

【讨论】：

这行得通。非常感谢。

【解决方案2】：

问题可能是由于使用了<img> 标签。右边的角可能没有完全圆化，因为图像容易被width 和border-radius 扭曲（即图像可能不会填满整个<img> 元素，因此看起来右边界半径是“不那么圆润”）。

边距或填充不影响，如下例所示：

.cnt {
  background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
  display: block;
  float: left;
  width: 400px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
#articleimage {
  padding-right: 10px;
  padding-bottom: 1px;
}
#articleimage2 {
  margin-right: 10px;
  margin-bottom: 1px;
}
#articleimage3 {
  padding-right: 10px;
  padding-bottom: 1px;
  width: 100px;
}
#articleimageAsBG {
    height: 192px;
    background: url('http://i.stack.imgur.com/es0aa.png') no-repeat center black;
    background-size: 98%;
}

<div class="cnt">
  <img id="articleimage" src="http://i.stack.imgur.com/es0aa.png" />
  <img id="articleimage2" src="http://i.stack.imgur.com/es0aa.png" />
  <img id="articleimage3" src="http://i.stack.imgur.com/es0aa.png" />
  <div id="articleimageAsBG">
  </div>
</div>

你注意到了：

#articleimage 正在使用内边距，右边框半径稍小。
#articleimage2 正在使用边距，并且右边框半径同样更小。
#articleimage3 减少了 width（小图像），因此您可以注意到差异。
我向您建议的替代方案和解决方案是使用另一个元素（如 div），在该元素中将该图像设置为示例中的最后一个图像的背景（向下滚动以查看 @ 987654333@)，你只需要调整它的background-size属性即可。

我也建议你添加：

-moz-border-radius: 30px;
-webkit-border-radius: 30px;

为了更好的浏览器兼容性。和maybe consider using display: inline-block instead of float。希望对您有所帮助！

【讨论】：