在Chrome/Safari iOS上，带有边框半径和边框颜色的图像无法正常显示。

Question

我正在努力弄清楚为什么一个带有圆形边框半径和白色边框颜色的图像在iOS上的Chrome/Safari上无法工作。它在我的桌面上可以工作。

这是它的截图，以及我的HTML/CSS：

截图：http://i46.tinypic.com/29z61c4.jpg HTML:

<div class="span4">
        <img class="img-circle" src="assets/img/subfeatured1.jpg">
        <h3>Feature 1</h3>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <p><a class="btn btn-primary" href="#">View details »</a></p>
</div>

CSS：

.img-circle {
  width: 70%;
  border: 10px solid white;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;       
            border-radius: 50%;

       -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);  
          -moz-box-shadow: 0 5px 12px rgba(0,0,0,1);  
               box-shadow: 0 5px 12px rgba(0,0,0,1);

     -moz-background-clip: padding;  
  -webkit-background-clip: padding-box;  
          background-clip: padding-box;
}

- nomaC

---

我用盒阴影替换了边框，似乎解决了这个问题：box-shadow: 0 0 0 9px rgba(255,255,255,1), 0 5px 12px rgba(0,0,0,1); - nomaC

你应该在下面发布那个作为答案。 - Josiah

Answer 1

检查您的浏览器版本是否过旧，这就是出现问题的原因。并且您不需要使用background-clip属性。

请检查此链接：demo jsFiddle

HTML

<img class="img-circle" src="http://3.bp.blogspot.com/-J_QabuviUDk/UEdgMt2AvfI/AAAAAAAAEIQ/yPc1XekoSnE/s1600/800px-Rectangle_example.svg.png">

CSS

.img-circle {
  width: 80%;
  border: 10px solid white;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%; 
            border-radius: 50%;

       -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);  
          -moz-box-shadow: 0 5px 12px rgba(0,0,0,1);  
               box-shadow: 0 5px 12px rgba(0,0,0,1);
}

Chrome 和 Safari 厂商前缀相同，所以我认为它在 Safari 上可以工作，但我不能百分之百确定。

- Jaykumar Patel