2

境界線の半径が 3px の要素にボックス シャドウを適用しようとすると、要素の背景のピクセルで角が醜くなります。

HTML

<div id="wrapper">


</div>

CSS

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

JSFIDDLE http://jsfiddle.net/PCzFC/1/

フィドルを見ると、黒い背景が隅にあることがわかります。このようになるはずですか、それともバグですか？私はFirefoxを使用しています。

4

4 に答える 4

4

これは Google Chrome の既知のバグであり、おそらく Firefox にも存在します。 http://code.google.com/p/chromium/issues/detail?id=29427

于 2012-11-27T10:07:22.930 に答える
2

インセットなしで同じ効果を作成できます。その周りに黄色のラッパーを作ります。

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 290px;
    height: 290px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px 1px black;
    -webkit-box-shadow: 0 0 5px 1px black;
    box-shadow: 0 0 5px 1px black;
    margin: 5px;
}
.yellow {
    background: yellow;
    border-radius: 6px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    margin: 40px auto;
}​

<div class="yellow">
<div id="wrapper">

</div>
</div>

http://jsfiddle.net/PCzFC/65/

于 2012-11-30T00:56:27.433 に答える
0

shadow: inset が行うことは、ボックス内に影を追加することです。すべてのボックス シャドウのインセットを削除すると、シャドウがボックスの外側に移動します。

于 2012-11-27T09:33:36.503 に答える
-3

これはバグではありません。これは、インセット シャドウ効果を使用し、css を理解できる場合はインセットの意味が内部にあるため、コードからインセットを削除すると正常に見えるか、ボックス内にシャドウ効果が必要な場合に発生します。次に、色を選択してボックスの色と一致させるか、コードから境界線の半径を削除することができます。

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}
于 2012-11-27T09:43:17.673 に答える