Question

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

CSS代码如下所示：

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

我已经确定问题是由右边的填充引起的，但是我需要CSS属性。我怎样才能阻止这场冲突？

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

Answer 1

尝试更改保证金的填充：

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

Answer 2

问题可能是由于使用了<img>标记。角落可能在右侧未完全呈圆形，因为图像容易因width和border-radius而失真（即图像可能无法填满整个<img>元素，因此看起来似乎右边界半径正在减少＃34;）。

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

你注意到了：

#articleimage使用填充，右边框半径略小。
#articleimage2正在使用边距，右边框半径也相同。
#articleimage3缩小了width（微小图片），因此您可以注意到差异。
我建议您使用的替代方案和解决方案是使用另一个元素（如div），将该图像设置为背景，如示例中的最后一个（向下滚动到请参阅#articleimageAsBG），您只需要调整其background-size属性。

我还建议您添加：

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

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

CSS border-radius属性不起作用

2 个答案: