1

インセットに明るい色のボーダーインセットを使用しようとしていますが、選択した色が正しく表示されないだけです。これはすべてのブラウザで同じです

css は次のとおりです。最初のボックスの境界線は明るく、2 番目のボックスは少し暗くする必要があります。

ここでフィドル：CSSインセットボーダーフィドル

.box1 {
display: inline-block;
border: 4px inset #f7f7f7;
margin-top: 16px; 
border-radius: 12px;
height: 34px;
background:#fff;
width:230px;
position:relative;
padding:10px;
}

.box2 {
display: inline-block;
border: 4px inset #cccccc;
margin-top: 16px;
border-radius: 12px;
height: 34px;
background:#f7f7f7;
width:230px;
position:relative;
padding:10px;
}

border-color 要素を個別に設定してみましたが、違いはありません

非常に奇妙な行動？

4

1 に答える 1

1

これは、仕様 ( http://www.w3.org/TR/CSS2/box.html#border-style-properties )でインセット ボーダーがどのように機能するかです。下部と右側は上部と左側よりも明るいです。後の 2 つは設定された色です。すべての境界オプションについては、 https://developer.mozilla.org/en-US/docs/Web/CSS/border-styleを参照してください。

于 2012-12-28T16:28:42.117 に答える