web-dev-qa-db-ja.com

1px未満のCSSボーダー

可能性のある複製：
HTML：サブピクセル境界

border:1pxが大きすぎます。サイズを半分にしたいのですが、どうすればいいのかわかりません。 border: 0.5px solid;は機能しません。 background imgを使用した解決策があることは知っていますが、CSSを使用するとより高速になります。

cssborder
90
Wizard

ピクセルは、何かをレンダリングする最小単位の値です。しかし、色を変更することで、錯視で厚さをだますことができます。 （目は 特定の解像度 のみを見ることができます。）

この点を証明するための テスト です：

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>

出力

enter image description here

これは、最後の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>
136
Yanick Rochon

画面上に1ピクセルより細い線を描くことは不可能です。代わりに、境界線にもっと微妙な色を使用してみてください。

3
duskwuff

必要に応じて、たとえば0.1％で境界線を％で指定してみてください。

2
Gagan Deep

画面に表示できる最小幅は1ピクセルです。したがって、1px未満を表示することはできません。 1ピクセルには1色しか使用できず、分割できません。

2
Sharpless512

ボーダー属性を定義して、値に0ピクセルを指定することができます。これは、片側でこの値が必要な場合に便利です。

例：

.box1 {
  border: 1px solid black;
  border-left: 0;
}

.box2 {
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}
1
arttronics