从中心的水平线性梯度（非径向）答案

【问题标题】：Horizontal linear gradient from center ( non-radial )从中心的水平线性梯度（非径向）
【发布时间】：2015-11-11 19:51:47
【问题描述】：

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

我已经查找了这方面的文档

我发现很多documentation 用于从左到右的线性渐变以及径向渐变。但这不是我想要产生的效果。

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

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

其他选项

我知道我可以镜像两个单独的线性渐变并将它们彼此相邻放置以伪达到所需的效果。

最后一个问题

但是，我想知道是否有预先构建的选项来实现实际所需的效果？

【问题讨论】：

【解决方案1】：

也许我遗漏了一些东西，但一个线性渐变应该可以解决问题：

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

从黑色开始，到中间的白色，然后回到黑色。

【讨论】：