21

次のスタイルを定義したh1があります。

h1
  { text-align: center;
    border: double black 1px;
    padding: 1em;
    margin: 1em;
}

ここに JSfiddle があります: http://jsfiddle.net/KatieK/Hs3ZQ/

境界線のスタイルを double に設定しましたが、境界線が 1 つしか表示されません。二重枠のレンダリングができないのはなぜですか?

4

4 に答える 4

42

doubleborder-width（ source ）として定義されたピクセル量を合計した2本の直線を表示します。

少なくとも3pxを使用する必要があります。

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/6/

于 2013-02-08T17:43:40.317 に答える
9

1pxは薄すぎて二重の境界線をレンダリングできないため、境界線を太くする必要があります。

h1
  { text-align: center;
    border: double black 3px;
    padding: 1em;
    margin: 1em;
}

http://jsfiddle.net/Hs3ZQ/3/

于 2013-02-08T17:42:26.090 に答える
5

二重の境界線の場合、効果3pxを確認するには、少なくとも境界線の幅をに設定する必要があります。

于 2013-02-08T17:42:34.870 に答える
2

CSS から 1px を削除すると機能します...

h1
  { text-align: center;
    border: double black;
    padding: 1em;
    margin: 1em;
}

更新されたフィドルを参照してください: http://jsfiddle.net/Hs3ZQ/5/

于 2013-02-08T17:45:22.547 に答える