CSS3渐变：如何制作1像素宽的线条

Question

我希望制作一个由1像素线组成的CSS3渐变。

我该如何实现？

我尝试了下面的代码，但生成的渐变太厚了：

background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);

(见此处)

我该如何让线条更细，只有1像素宽？百分比值似乎控制线条的定位，但是无论我如何调整它们，都无法使其变为1像素宽！

（实际上，我使用这条线作为“假列”背景[即在视觉上分离左右两个列。 （尽管为了保持jsFiddle简单，我已经删除了列）]我知道有其他方法可以进行列，但是这种方法是我目前情况下最好的方法）

编辑：仅澄清一下，这是一个稍微奇怪的用例，其中宽度必须为100％，不能使用伪元素。

- big_smile

---

你尝试过使用伪元素吗？可以使用1像素宽的绝对定位。 - Scott Simpson

@ScottSimpson：感谢回复。我的用例有点奇怪，所以宽度必须是100％，我不能使用伪元素。渐变似乎是最好的解决方案，如果我只能让它变成1像素宽！ - big_smile

Answer 1

/* Opera Mobile */
background: -o-linear-gradient(left, #d1d1d1 1px, white 1px);
/* Firefox for Android */
background: -moz-linear-gradient(left, #d1d1d1 1px, white 1px);
/* WebKit browsers */
background: -webkit-linear-gradient(left, #d1d1d1 1px, white 1px);
/* new syntax: IE10, Firefox, Opera */
background: linear-gradient(90deg, #d1d1d1 1px, white 1px);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: 50%;

演示

[在演示中，我将1px替换为2px，因为1px并不可见。我只在Chrome浏览器中进行了测试。]

始终将未加前缀的版本放在最后。不需要使用-ms-linear-gradient。IE10现在支持没有前缀的标准语法，而IE9根本不支持渐变。

- Ana

---

这是唯一有效的答案。其他的“不起作用”。 - qodeninja

Answer 2

如果你不关心IE8（如果你使用渐变，你可能不在乎），你可以使用calc()。

background-image: linear-gradient(left, transparent 50%, rgb(255,255,255) 50%, rgb(255,255,255) calc(50% + 1px), transparent calc(50% + 1px));

这将适用于任何宽度的元素，而仅使用百分比会在较小和较宽的元素上崩溃。

- Derek

Answer 3

.style {        
    background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
    background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}

您不是在处理像素，而是在使用百分比。因此，您的宽度必须为200，而1％的宽度为2px。（我认为这就是为什么这个可以工作，也许我错了。）您可以使用小数来表示百分比，例如0.5％等于1px。

- smulholland2

---

你的 JSFiddle 链接已经失效。 - Simon

@Simon，我在发帖后更改了用户名。现在已经修复了。 - smulholland2

Answer 4

我之前用过这个，根据你的需要进行更改。我的意思是根据你想要的颜色和角度进行更改。

background-image: liner-gradient(to bottom, white, white 14%,blue 1%,white 15%);

- WagonWolf