ios - 带有边框半径 + 边框颜色的图像在 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;
}

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 上工作，我不确定 100%。