边框半径没有在 Safari 中使用填充和边框在 div 中制作圆形图像答案

【问题标题】：border-radius not making image circular in Safari in div with padding and border边框半径没有在 Safari 中使用填充和边框在 div 中制作圆形图像
【发布时间】：2014-05-08 13:58:38
【问题描述】：

我有一个<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：

关于如何让图像在 Safari 中以与在 Chrome 中相同的方式出现的任何建议？

【问题讨论】：

尝试使用border-radius: 50%; （不是 em）

标签： html css safari webkit sass

【解决方案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 值无关紧要，只要它大于得到圆的高度和宽度值即可。

【讨论】：

你应该使用 50% 作为边框半径来得到一个圆。无论元素大小如何，它始终有效。

【解决方案2】：

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

【讨论】：