2011-06-20 11 views
1

CSS 3で丸みのあるコーナーを使用しようとしていますが、奇妙なバグがあります。 IE9では、すべてがうまく表示されます。しかし、クロムでは、境界線に色を追加しようとすると、コーナー自体が薄すぎるように見えます。誰もがこのバグを取得していますか?バグですか?CSS 3ボーダー半径プロパティ。 Chromeであまりにも薄いコーナーですか?

私が使っているものの例は以下の通りです:あなたの助けのための

border: solid 1px #000000; 
-moz-border-radius: 10px; 
-khtml-border-radius:10px; 
border-radius: 10px; 

[[解決しよう]]
おかげで、私は、問題が何であったかが分かりました。

イメージを丸めている(おそらくこれを指定しているはずです)ので、実際のボーダーが丸みを帯びてボーダーが丸くなっているように見えます。 。画像を少し変更することで、私が探していた結果を得ることができました。

もう一度おねがいします! N.S.

+5

異なるブラウザでは、丸みを帯びた境界線が別々に描画されることに注意してください。実際のバグそのものではなく、実装の詳細です。 – BoltClock

+1

私はクロムの国境が薄く見えるとは言いません。スクリーンショットを投稿できますか?たぶん、アンチエイリアシングがそれをより淡く見せるのでしょうか? @BoltClockのように – RoToRa

+0

と言うと、ブラウザは少し違った形でレンダリングします。イメージの古い学校のアプローチを使用すると、問題が解決する可能性があります。 – Alex

答えて

2

あなたの角を丸めも、CSS3プロパティのブラウザの実装によってbackground-originbackground-clipを影響を受ける可能性がしてみてください。

バックグラウンド起点プロパティは、特定のボックス内の背景のバックグラウンド位置がどのように計算されるかを決定するために使用されます。 背景クリッププロパティを使用して、背景が境界に広がっているかどうかを判断します。

次のスクリーンショットdemonstrates the differences 2つのプロパティは、四角形に影響する可能性がある背景と罫線にあります。

enter image description here

第二行はbackground-clip: padding-boxを指定しながら、最初の行は、background-clip: border-boxを使用します。

1

多分これ

-webkit-border-radius: 10px; 
+0

申し訳ありませんが、私はそれを追加することを忘れましたが、私はすでにそれを持っています。 –

0

ご協力ありがとうございますが、問題の原因がわかりました。

イメージを丸めている(おそらくこれを指定しているはずです)ので、実際のボーダーが丸みを帯びてボーダーが丸くなっているように見えます。 。画像を少し変更することで、私が探していた結果を得ることができました。

もう一度おねがいします! N.S.

関連する問題