4

我试图弄清楚为什么具有圆形边框半径和白色边框颜色的图像在 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;
}
4

1 回答 1

0

检查您的浏览器版本是否旧，这就是发生此问题的原因。而且你不需要使用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%。

于 2014-02-27T07:35:23.580 回答