border-radius不会在带有填充和边框的div中使图像呈圆形

Question

我的<div>内有img。

结构如下：

<div class="gift">
    <img>
</div>

div有这个CSS：

display: inline-block;
overflow: hidden;
width: auto;
vertical-align: middle;
position: relative;
border-radius: 50em;

图片有这个CSS：

border: 1px solid 
rgba(46, 46, 46, 0.1);
border-radius: 50em;
padding: 3px;
min-height: 10em;
height: 10em;

在Safari中，它看起来像1：

但是，在Chrome中它看起来应该是2：

有关如何使图像在Chrome中以与Chrome相同的方式显示的任何建议吗？

Answer 1

基本上通过给予img这个CSS来修复：

img{
    border-radius: 50em;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
}

并给了div这个CSS：

div.gift{
    overflow: hidden;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
    border: 1px solid rgba(46, 46, 46, 0.1);
    padding: 3px;
    border-radius: 50em;
}

border-radius值无关紧要，只要它大于高度和宽度值才能获得cirlce。

Answer 2

我通过使用圆形边框和50％半径的圆角PNG图像来克服这个问题。