CSS边框小于1px [英] CSS border less than 1px

问题描述

可能重复：

HTML：子像素边框

border：1px 太大。我想有一半的大小，但我不知道如何做到这一点。 border：0.5px solid; 无法使用。我知道有一个解决方案与 background img ，但使用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 < / div>< div class =b4>部分文字< / div>< / div>  

输出

b $ b

>

其中给出了最后的 DIV 具有较小边框宽度的错觉，因为蓝色边框与白色背景更多地混合。

---

编辑：替代解决方案

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 >容器1（1px）< / div>< div class =container border-75>容器2（0.75像素）< / div>< div class =container border-50 3（0.5px）< / div>< div class =container border-25> Container 4（0.25px）< / div>  

div>

Possible Duplicate:
HTML: Sub-pixel border

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.

解决方案

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.

---

Edit : Alternate solution

Alpha values may also be used to simulate the same effect, without the need to calculate and manipulate RGB values.

.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 (1px)</div>
<div class="container border-75">Container 2 (0.75px)</div>
<div class="container border-50">Container 3 (0.5px)</div>
<div class="container border-25">Container 4 (0.25px)</div>

这篇关于CSS边框小于1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！