CSS边框小于1px[重复]

Possible Duplicate:
HTML: Sub-pixel border

可能的重复:HTML:亚像素边框。

border:1px is too big. I want to have have it half the size, but I do not know how to do this. border: 0.5px solid; does not work. I know there is a solution with background img, but with CSS it will be faster.

边界:1 px太大了。我想要它的一半大小，但我不知道怎么做。边界:0.5 px固体;不工作。我知道有一个解决方案与背景img，但与CSS将更快。

5 个解决方案

#1

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 to a certain resolution too.)

像素是用来渲染某物的最小的单位值。但是你可以通过修改颜色来欺骗厚度。(眼睛也只能看到一定的分辨率。)

Here is a test to 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 DIV has 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>

#2

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.

在屏幕上画一条比一个像素还细的线是不可能的。试着在边框上使用更微妙的颜色。

#3

try giving border in % for exapmle 0.1% according to your need.

根据您的需要，试着用%来表示0.1%的紧急情况。

#4

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是不可能的。一个像素只能有一个颜色，不能分割。

#5

You can still define the border attribute and give it a value of 0 pixels, useful when one side needs this value.

您仍然可以定义border属性并给它一个0像素的值，这在一方需要这个值时非常有用。

Examples:

例子:

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

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