Question

我已经查看了其他一些问题和答案，但仍无法在Safari中使用（v 5.1.7）。

这是我的代码 - jsfiddle

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}
.services img   {
    border: solid 8px #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.services a img:hover   {
    border: solid 8px #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

图像是方形的218px x 218px，所以我猜它与它有关，但我想要它，所以它在不支持边界半径的旧浏览器中看起来不错。

这可能很简单，但我仍然坚持这一点。

感谢。人

Answer 1

Sitepoint答案：

嗯，很棘手。如果您将边框放在而不是：

代码：

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}

.services img   {
    vertical-align: top;
}

.services img, .services a   {
    border-radius: 50%;
}

.services a {
    border: 8px solid #ccc;
    display: inline-block;
}

.services a:hover   {
    border: 8px solid #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

您现在可以立即使用border-radius，而不使用供应商前缀，因为现在所有支持它的浏览器都可以。

Safari中的边界半径切割/图像重叠

1 个答案: