css - 图像未填充边界半径

Question

我为我的用户 Gravatar 图片添加了一个边框半径，并确保为 chrome 和 safari 扩展添加了正确的 CSS，但图片并没有完全填满整个圆圈。但是它在 Firefox 中正确显示。这是我的 CSS 以及问题的一些图片。

.gravatar{float: left; text-align: center; 
margin-top:1px; border:2px solid white;background-color:#ffffff;-webkit-border-radius:55%;-moz-border-radius:55%;border-radius:55%;box-shadow:0 0 10px rgba(0,0,0,0.3);
height: 38px;
width: 38px;
}

CSS 中唯一提到的 gravatar 是

.gravatar {
    padding: 0px;
    display: inline;

}

在我的 Bootstrap.min.css 中

我正在通过 PHP 从 Gravatar 调用图像

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

感谢您提供的任何解决方案。

Answer 1

据我所知，与其说是图像未填充边框半径的问题，不如说是浏览器呈现边框的方式之一。如果您将边框的颜色更改为与图片不同的颜色，您可以看到，实际上，在 Chrome 中绘制时，边框是绘制在图片下方的。一个可能的解决方法是用 div 包裹图像，然后在该 div 上放置边框。

我使用了一张 16x16 的图像并得到了与您相同的结果......一开始。我用 div 包裹它，问题就消失了。

.gravatar
{
    float: left; 
    text-align: center; 
    margin-top: 1px; 
    background-color: #ffffff;
    -webkit-border-radius:55%;
    -moz-border-radius:55%;
    border-radius:55%;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    height: 38px;
    width: 38px;
}
.gravWrap
{
    display:inline-block;
    border-radius: 55%;
    border: solid 2px blue;
}

<div class='gravWrap'><img class='gravatar' src='img/rss16.png'/></div>

编辑:您可以像这样输出该标记:

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><div class='gravWrap'><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></div> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>