css - 如何区分 CSS 渐变的不同属性？

Question

如果我有如下所示的 CSS 渐变代码：

 background-image: radial-gradient(circle farthest-side at center, #E6E6E6 0%, #BABABA 100%);

我想将渐变的不同属性分开，使其更灵活。我的意思是我应该能够将不同的属性（即圆形、中心最远侧等）定义为不同的属性，每个属性都位于不同的行上。

那可能吗？

Answer 1

目前这是不可能的，因为 CSS3 只提供了一个函数式符号，它将所有值作为参数，而不是一组属性，用于表达某种渐变。

该规范暗示这是为了让浏览器更容易动态生成渐变：

本节中描述的梯度表示法允许作者以简洁的语法指定这样的图像，以便 UA 可以在渲染页面时自动生成图像。

我想将其拆分为属性会使样式解析或语法过于复杂，这就是他们选择功能符号的原因。

Answer 2

目前这是不可能的。您唯一可用的选项是：

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.27, rgb(100,173,97)),
    color-stop(0.64, rgb(130,208,127)),
    color-stop(0.82, rgb(156,250,166))
);