CSS3 Gradients:如何制作1px宽线

Question

我想制作一个由1px线组成的CSS3渐变.

我怎样才能做到这一点？

我尝试了以下代码,但生成的渐变太厚:

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

(见这里)

如何使线条更小,所以它只有1px宽？百分比值似乎控制了线的位置,但无论我调整多少,我都无法达到1px宽!

(基本上,我使用该行作为'人造列'背景[即在视觉上分隔左右列.(虽然,为了保持jsFiddle简单,我已删除列)]我知道还有其他方法做列,但这种方法对我的情况是最好的)

编辑:只是为了澄清,这是一个稍微奇怪的用例,其中宽度必须是100%,并且不能使用psudeo元素.

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%;

演示

[我使用2px而不是1px在演示中,1px因为不可见.我只在Chrome中测试过.]

您应该始终将未加前缀的版本放在最后.没有必要-ms-linear-gradient.IE10现在支持没有前缀的标准语法,IE9根本不支持渐变.

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));

这适用于任何宽度元素，而仅使用百分比会分解更小和更宽的元素。