blocks|key|3051377|text|在屏幕上画一条比一个像素还细的线是不可能的。请尝试使用更微妙的边框颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3051378|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It's impossible to draw a line on screen that's thinner than one pixel. Try using a more subtle color for the border instead.</p>


blocks|key|2838355|text|尝试根据您的需要以%25为单位添加边框，以获取0.1%25的边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2838356|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>try giving border in % for exapmle 0.1% according to your need.</p>


blocks|key|2838385|text|您的屏幕可以显示的最小宽度是1像素。所以显示小于1px是不可能的。%251像素只能有%251种颜色，并且无法拆分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2838386|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>The minimum width that your screen can display is 1 pixel. So its impossible to display less then 1px. 1 pixels can only have 1 color and cannot be split up.</p>


blocks|key|2838415|text|像素是渲染对象的最小单位值，但您可以通过修改颜色来使用光学错觉来欺骗厚度(眼睛也只能看到最大的certain+resolution+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2838416|以下是证明这一点的a+test：|2838417|​|2838418|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);+}|code-block|syntax|javascript|2838419|<div+class="b1">Some+text</div>
<div+class="b2">Some+text</div>
<div+class="b3">Some+text</div>
<div+class="b4">Some+text</div>|2838420|2838421|输出|2838422|2838423|📷|atomic|2838424|2838425|这给人一种错觉，即最后一个DIV的边框宽度较小，因为蓝色边框与白色背景的混合程度更高。|style|CODE|2838426|2838427|编辑:备用解决方案|2838428|也可以使用Alpha值来模拟相同的效果，而无需计算和处理RGB值。|2838429|2838430|.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);+}|2838431|<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>|2838432|2838433|entityMap|0|LINK|mutability|MUTABLE|url|http://www.clarkvision.com/articles/eye-resolution.html|1|http://jsfiddle.net/F7kpe/|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/04ce55c0cf340204a2eb471afcf96504.png|imageAlt^0|1B|I|0|0|9|6|1|0|0|0|0|0|0|0|0|1|2|0|0|D|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@$A|1S|B|1T|1|1U]]|C|$]]|$1|D|3|E|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|F|3|G|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|20|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|21|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|22|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|23|8|@]|9|@]|C|$]]|$1|R|3|G|5|6|7|24|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|25|8|@]|9|@$A|26|B|27|1|28]]|C|$]]|$1|V|3|G|5|6|7|29|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|2A|8|@$A|2B|B|2C|Y|Z]]|9|@]|C|$]]|$1|10|3|-4|5|6|7|2D|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2E|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2F|8|@]|9|@]|C|$]]|$1|15|3|G|5|6|7|2G|8|@]|9|@]|C|$]]|$1|16|3|17|5|J|7|2H|8|@]|9|@]|C|$K|L]]|$1|18|3|19|5|J|7|2I|8|@]|9|@]|C|$K|L]]|$1|1A|3|G|5|6|7|2J|8|@]|9|@]|C|$]]|$1|1B|3|-4|5|6|7|2K|8|@]|9|@]|C|$]]]|1C|$1D|$5|1E|1F|1G|C|$1H|1I]]|1J|$5|1E|1F|1G|C|$1H|1K]]|1L|$5|1M|1F|1N|C|$1O|1P|1Q|-4]]]]

<p>A pixel is the smallest unit value to render something with, but you can trick thickness with optical illusions by modifying colors (the eye can only see up to a <a href="http://www.clarkvision.com/articles/eye-resolution.html" rel="noreferrer">certain resolution</a> too).</p>
<p>Here is <a href="http://jsfiddle.net/F7kpe/" rel="noreferrer">a test</a> to prove this point:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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); }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="b1"&gt;Some text&lt;/div&gt;
&lt;div class="b2"&gt;Some text&lt;/div&gt;
&lt;div class="b3"&gt;Some text&lt;/div&gt;
&lt;div class="b4"&gt;Some text&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<h3>Output</h3>
<p><img src="https://i.stack.imgur.com/TE2wl.png" alt="enter image description here" /></p>
<p>Which gives the illusion that the last <code>DIV</code> has a smaller border width, because the blue border blends more with the white background.</p>
<hr />
<h2>Edit: Alternate solution</h2>
<p>Alpha values may also be used to simulate the same effect, without the need to calculate and manipulate RGB values.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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); }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container border-100"&gt;Container 1 (alpha = 1)&lt;/div&gt;
&lt;div class="container border-75"&gt;Container 2 (alpha = 0.75)&lt;/div&gt;
&lt;div class="container border-50"&gt;Container 3 (alpha = 0.5)&lt;/div&gt;
&lt;div class="container border-25"&gt;Container 4 (alpha = 0.25)&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="https://stackoverflow.com/questions/5709698/html-sub-pixel-border">HTML: Sub-pixel border</a>  </p>
</blockquote>



<p>The default <code>border:1px</code> is too big. However, <code>border: 0.5px solid;</code> is not working. 
Is there a CSS solution that would make the border half the size? </p>


CSS border less than 1px

 可能重复：默认border:1px太大。但是，border: 0.5px solid;不起作用。有没有一种CSS解决方案可以让边框的大小减半？

问CSS边框小于1px
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS边框小于1pxEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS边框小于1px
EN