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サファリで動作していると思いますが、100％わかりません。

于 2014-02-27T07:35:23.580 に答える