4

問題のフィドル 1

これが問題のフィドルです: Fiddle 1

#one {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green;
}
<div id="one"></div>

この特定の例では、左上の境界半径を 100% 使用し、他のすべての境界半径は 0% で、高さは幅と等しく、象限を生成しています。

ここで、x、y オフセットを使用してメイン要素に 3 つのインセット ボックス シャドウを追加しました。次のように、ボックスの影が曲線をたどり、互いに平行になることを期待しています。

ここに画像の説明を入力

これは代わりに出力です：

ここに画像の説明を入力

問題のフィドル 2

これは、曲線に従わないボックス シャドウの別の例です。これは xy オフセットなしです。フィドル 2

div {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 0px 0px 0 70px green;
}
<div></div>

この場合、ピンク色の領域は象限のはずですが、三角形のように見えます。

ここに画像の説明を入力

スプレッド半径が大きくなると、インセット ボックス シャドウのカーブが失われるのはなぜですか? バグですか？すべての主要なブラウザーが同じ出力を提供するため、1 つではないようです。

4

1 に答える 1

3

これはバグではなく、box-shadow の正しい実装です。外側の境界半径は高さ 200 ピクセル (ボックスの高さの 100%) の曲線であり、最初の挿入されたボックス シャドウのトレースに使用される最も外側のオブジェクトであるため、最初の曲線はあなたのようになります。予想。ただし、2 つ目は、半径 200px の円の外側に線を引く必要があります。ただし、2 番目のボックス シャドウがさらに挿入されるため、その円の円周が少なくなり、直線に近くなります。各ボックス シャドウが挿入されるほど、次の 200 ピクセルの半径の円のエッジが少なくなるため、直線に近づきます。

#wrapperこのフィドルで CSSのコメントを外すと: http://jsfiddle.net/31xLprkv/1/、同じ効果が見られます。SO には Fiddle URL を含むコードが必要なため、そのコードは次のとおりです。

HTML

<div id="wrapper">
    <div id="one"></div>
</div>

CSS

/*#wrapper {
    height: 200px;
    width: 200px;
    overflow: hidden;
}*/

#one {
    height: 200px;
    width: 200px;
    margin: 120px;
    border-radius: 200px 0 0 0;
    background-color: plum;
    box-shadow: -40px -40px red, -80px -80px blue, -120px -120px green;
    float: left;
}

border-radius は半径が設定された単一の曲線のみを生成し、box-shadow は既存の要素の背後にあるレンダリングされた border-radius の正確なコピーのみを再現するため、box だけで目的の効果を実装することはできません。 -影の多い。

于 2015-03-24T14:34:16.813 に答える