Question

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

我该怎么做？

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

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

（见here）

如何使线条更小，所以它只有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%;

demo

[我在演示中使用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));

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

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

您没有使用像素，而是使用百分比。所以宽度的1％，必须是200，是2px。（我认为这就是为什么this有效，也许我错了。）你可以使用百分比小数，所以.5％== 1px。

Answer 4

我以前使用过此功能，请根据您的需要进行更改。我的意思是根据需要更改颜色和角度

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

CSS3 Gradients：如何制作1px宽线

4 个答案:

demo