中心水平线性渐变(非径向)

时间:2015-11-11 19:51:48

标签: css linear-gradients

是否存在源自中心的CSS线性渐变,但不是径向形式?

我已查找此

的文档

我发现从左到右和径向渐变的线性渐变有很多documentation。但这不是我希望产生的效果。

如果您想知道为什么不使用径向渐变

这适用于横跨网页高度的侧边栏。我希望它看起来像圆柱。这就是我不想使用径向效果的原因,因为这会将侧边栏视为球体。

其他选项

据我所知,我可以镜像两个独立的线性渐变,并将它们彼此相邻放置,以达到预期的效果。

最终问题

但是,我想知道是否有实际预期效果的预建选项?

1 个答案:

答案 0 :(得分:3)

也许我错过了一些东西,但是单个线性渐变应该可以解决问题:

background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,1) 100%);

从黑色开始,在中心变为白色,然后变回黑色。