2

画像に境界半径を使用していますが、画像の角が丸くなっていません。

しかし、同じコードが Mozilla Firefox で正しく機能していました。

CSS :

 body img { 
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 3px solid #ed1d24;
    }

ここに画像の説明を入力

4

3 に答える 3

1

コードのどこかにエラーがあるはずですborder-radius。GolezTrol が既に示しているように、Google Chrome では問題なく動作します。CSS も正しいです。

開発者ツールを開いて、スタイルが要素に適切に適用されているかどうかを確認してくださいimg。

于 2012-12-11T11:15:54.900 に答える
1

最初に境界線を設定してから、その半径をオーバーライドします。

 body img { 
    border: 1px solid #ed1d24;
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    }

[編集]

実際、私はそれがどちらか一方の方法で機能するとしか結論付けられません。私は自分で Chrome を使用していますが、このフィドルの両方の画像の角が丸くなっています。

http://jsfiddle.net/aqBA7/

于 2012-12-11T11:08:52.360 に答える
0

ラッパーを使用して、 and を内部の画像のみにdiv適用します。コンテナに画像を適切に記入するために、画像の を の と正確に同じ量だけ減らしました。両方の要素を同じにすると、 によってサイズがわずかに異なるため、角にわずかな隙間ができます。borderborder-radius#wrapperborder-radiusborder-radiusborder widthwrapperborder-radiusborder width

HTML : 

<div id="wrapper">
   <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" width="620" height="388" alt="" /> 
</div>

CSS :

#wrapper {
    width: 620px; height: 388px;
    border: 2px solid #ed1d24;
    border-radius: 20px;
}    

#wrapper img { 
    border-radius: 18px; /* wrapper radius minus wrapper border width */
}​

SafariでテストされたDEMO：

http://jsfiddle.net/D7MHh/2/

Safari での jsFiddle のスクリーンショット:

jsFiddle の Safari でのスクリーンショット

于 2012-12-12T05:34:59.243 に答える