0

border-radiusと を使用しているときに、クロムに別のバグが見つかりましたbox-shadow。

説明が難しいので、下の写真を見てください。

  • 最初のボックスは良好で、半径は53pxです。

  • 2番目のボックスは角の影を失います。私には、影が正方形になっているように見えoverflow: hidden ますが、このボックスの半径が54px.

  • 最後のボックスがねじ込まれ、影は 2 番目のボックスと同じように見えますが、overflow:hidden 効果によって隠されているだけではありません。このボックスの半径は です56px。 ここに画像の説明を入力 自分でデモをチェックしてください。Firefox では問題なく動作します。問題はChromeにあります。

デモ: http://jsfiddle.net/RmYea/1/

誰でもこれに光を当てることができますか?なぜそれが起こるのですか?

CSS :

div{
    height:50px;
    width: 90%;
    margin: 20px auto;
    border: 5px solid green;
    box-shadow: 0px 0px 5px 2px inset;
}

div:nth-child(1){
     border-top-left-radius: 53px;   
}

div:nth-child(2){
     border-top-left-radius: 54px;   
}

div:nth-child(3){
     border-top-left-radius: 56px;   
}

注: これは次の場合にのみ発生しますinset

4

2 に答える 2

0

最初に、本当の意味で元の質問に答えていないことを確認しますが、この問題については少し違った見方をしています。

border-radiusそもそもに使用されている値に疑問があります。

あなたの高さは<div>です50px。したがって、border-radius値はそれ以上であってはなりません50px(これにより完全な高さの曲線が得られます)。

例: http://jsfiddle.net/WWvxV/

上記に従って、両方のブラウザーが要素を期待どおりにレンダリングします。

繰り返しますが、Chrome で適用できる値よりも大きい値の処理に問題があることに同意しますが、初期値も修正が必要だと思います。

于 2013-09-18T13:45:17.080 に答える