CSS 边框小于 1px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13891177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS border less than 1px
提问by Wizard
Possible Duplicate:
HTML: Sub-pixel border
可能的重复：
HTML：子像素边框
The default border:1pxis too big. However, border: 0.5px solid;is not working.
Is there a CSS solution that would make the border half the size?
默认border:1px值太大。但是，border: 0.5px solid;不起作用。是否有一个 CSS 解决方案可以使边框尺寸减半？
回答by Yanick Rochon
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 certain resolutiontoo).
像素是用于渲染事物的最小单位值，但您可以通过修改颜色（眼睛也只能看到特定分辨率）来欺骗视觉错觉的厚度。
Here is a testto prove this point:
这里有一个测试来证明这一点：
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>Output
输出
Which gives the illusion that the last DIVhas a smaller border width, because the blue border blends more with the white background.
这给人一种错觉，即最后DIV一个边框宽度较小，因为蓝色边框与白色背景融合得更多。
Edit: Alternate solution
编辑：替代解决方案
Alpha values may also be used to simulate the same effect, without the need to calculate and manipulate RGB values.
Alpha 值也可用于模拟相同的效果，而无需计算和操作 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>回答by duskwuff -inactive-
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.
在屏幕上画一条比一个像素还细的线是不可能的。尝试为边框使用更微妙的颜色。
回答by Gagan Deep
try giving border in % for exapmle 0.1% according to your need.
尝试根据您的需要以 % 为 exapmle 0.1% 给出边界。
回答by Sharpless512
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.
您的屏幕可以显示的最小宽度为 1 像素。所以它不可能显示小于 1px。1个像素只能有1种颜色，不能分割。
