css – Safari和Mobile Safari是否呈现圆角边框,半径和填充不正确?

前端之家收集整理的这篇文章主要介绍了css – Safari和Mobile Safari是否呈现圆角边框,半径和填充不正确?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当您组合边框半径,填充和边框时,Safari和Mobile Safari似乎有问题.适用于Chrome和Firefox.

< - 预计 < - Safari渲染 HTML:

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS:

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

示例:http://jsfiddle.net/ucNwx/2/

是我的错还是狩猎?我该如何解决

解决方法

我敢打赌它是Safari bug:border-radius应用较晚并产生剪辑效果.幸运的是,Box-shadow被正确呈现,所以让我们使用它:
border-radius: 50%;
Box-shadow:
  0 0 0 3px white,0 0 0 4px #999;

在iPad和OS X上的Safari 6上有Works.

猜你在找的CSS相关文章