重複の可能性:
HTML: サブピクセル境界線
デフォルトborder:1px
は大きすぎます。ただし、機能しborder: 0.5px solid;
ていません。境界線を半分のサイズにする CSS ソリューションはありますか?
重複の可能性:
HTML: サブピクセル境界線
デフォルトborder:1px
は大きすぎます。ただし、機能しborder: 0.5px solid;
ていません。境界線を半分のサイズにする CSS ソリューションはありますか?
ピクセルは何かをレンダリングするための最小単位ですが、色を変更することで目の錯覚で厚さをだますことができます (目も特定の解像度までしか見ることができません)。
この点を証明するテストは次のとおりです。
div { border-color: blue; border-style: solid; margin: 2px; }
div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }
<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>
DIV
これは、青い境界線が白い背景により溶け込むため、最後の境界線の幅が小さいという錯覚を与えます。
RGB 値を計算して操作する必要なく、アルファ値を使用して同じ効果をシミュレートすることもできます。
.container {
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
}
.border-100 { border-color: rgba(0,0,255,1); }
.border-75 { border-color: rgba(0,0,255,0.75); }
.border-50 { border-color: rgba(0,0,255,0.5); }
.border-25 { border-color: rgba(0,0,255,0.25); }
<div class="container border-100">Container 1 (alpha = 1)</div>
<div class="container border-75">Container 2 (alpha = 0.75)</div>
<div class="container border-50">Container 3 (alpha = 0.5)</div>
<div class="container border-25">Container 4 (alpha = 0.25)</div>
画面上に 1 ピクセルよりも細い線を引くことはできません。代わりに、境界線にもっと微妙な色を使用してみてください。
必要に応じて、例として0.1%の境界線を%で指定してみてください。
画面に表示できる最小幅は 1 ピクセルです。したがって、1px未満を表示することは不可能です。1 ピクセルは 1 色しか持つことができず、分割することはできません。