次のスタイルを定義したh1
があります。
h1
{ text-align: center;
border: double black 1px;
padding: 1em;
margin: 1em;
}
ここに JSfiddle があります: http://jsfiddle.net/KatieK/Hs3ZQ/
境界線のスタイルを double に設定しましたが、境界線が 1 つしか表示されません。二重枠のレンダリングができないのはなぜですか?
次のスタイルを定義したh1
があります。
h1
{ text-align: center;
border: double black 1px;
padding: 1em;
margin: 1em;
}
ここに JSfiddle があります: http://jsfiddle.net/KatieK/Hs3ZQ/
境界線のスタイルを double に設定しましたが、境界線が 1 つしか表示されません。二重枠のレンダリングができないのはなぜですか?
double
border-width( source )として定義されたピクセル量を合計した2本の直線を表示します。
少なくとも3pxを使用する必要があります。
h1
{ text-align: center;
border: double black 3px;
padding: 1em;
margin: 1em;
}
1pxは薄すぎて二重の境界線をレンダリングできないため、境界線を太くする必要があります。
h1
{ text-align: center;
border: double black 3px;
padding: 1em;
margin: 1em;
}
二重の境界線の場合、効果3px
を確認するには、少なくとも境界線の幅をに設定する必要があります。
CSS から 1px を削除すると機能します...
h1
{ text-align: center;
border: double black;
padding: 1em;
margin: 1em;
}
更新されたフィドルを参照してください: http://jsfiddle.net/Hs3ZQ/5/