3

我想制作一个由 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%，并且不能使用伪元素。

4

4 回答 4

7 
/* 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而不是因为不可见。我只在 Chrome 中测试过。]1px1px

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

于 2013-01-26T01:32:08.183 回答
6

如果您不关心 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));

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

于 2014-04-18T14:09:42.143 回答
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。（我认为这就是为什么它有效，也许我错了。）你可以使用百分比小数，所以 0.5% == 1px。

于 2013-01-26T02:45:33.363 回答
0

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

background-image: liner-gradient(to bottom, white, white 14%,blue 1%,white 15%);
于 2018-11-28T11:51:10.297 回答