html - 边框半径不会在 Safari 中使用填充和边框在 div 中制作圆形图像

Question

我有<div>一个img里面。

结构如下：

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

有这个divCSS：

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 中相同的方式出现在 Safari 中的任何建议？

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

边界半径值无关紧要，只要它大于得到圆的高度和宽度值即可。

Answer 2

我通过使用带有圆形边框和 50% 半径的圆形 PNG 图像克服了这个问题。