23

div 内に画像を配置しています。div は角が丸くなっており、画像の角を隠して円として表示するマスクとして機能します。Safari 以外のすべてのブラウザで動作します。誰もそれを修正する方法を知っていますか?

試してみまし-webkit-padding-boxた-webkit-mask-box-imageが、どちらもうまくいきませんでした。

HTML:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>

CSS:

.cat{
    width: 128px;
    height: 128px;
    margin: 20px 96px 0px 96px;
    position: relative;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    border-top: 1px solid #111;
    border-bottom: 1px solid #fff;
    background: #fff;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

.cat img{
    position: absolute;
    border: none;
    width: 138px;
    height: 138px;
    top: -8px;
    left: -8px;
    cursor: pointer;
}

フィドル

4

3 に答える 3

67

これを回避する最善の方法はoverflow: hidden;、親要素を指定することです。

于 2013-07-16T22:36:27.397 に答える
0

どのバージョンの Safari を使用していますか?

その問題に対するいくつかの (不満な) 説明: How to make CSS3 rounded corners hide Overflow in Chrome/Opera

<img />でコンテンツ フローから抜け出していposition:absolute;ます。そうすることで、表示属性もブロックに変更する必要があります。次に、border-radius もオンにするのが理にかなっていimgます。

http://jsfiddle.net/Volker_E/LgYrz/ を参照して
ください。 注: 非常に古い Webkit (Safari < 5.0) -webkit-border-radiusでは必要です。

于 2013-05-15T00:22:11.110 に答える