具有边框半径 + 边框颜色的图像在 Chrome/Safari iOS 上不起作用答案

【问题标题】：Image with border radius + border color not working on Chrome/Safari iOS具有边框半径 + 边框颜色的图像在 Chrome/Safari iOS 上不起作用
【发布时间】：2014-03-24 20:13:53
【问题描述】：

我正在尝试找出为什么具有圆形边框半径和白色边框颜色的图像无法在 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;
}

【问题讨论】：

我用盒子阴影替换了边框，它似乎解决了这个问题：box-shadow: 0 0 0 9px rgba(255,255,255,1), 0 5px 12px rgba(0,0,0,1);
您应该将其作为答案发布在下面。

标签： ios css

【解决方案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%。

【讨论】：