google-chrome - Chrome 中的 CSS3 椭圆渐变

Question

我正在尝试在 chrome 中获得椭圆渐变。我试过了

    background-image:
    -webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))),
    -webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2));

运气不好。我已经尝试了一些我在网上和一些书中找到的其他东西，但都失败了，或者以圆圈形式出现。

通过 firefox 很容易做到(对那些感兴趣的人来说效果很酷):

    background-image:
    -moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)),
    -moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2);

这在 chrome 中可行吗？根据我所见过的渐变计划规范，这应该是可能的。也许 Chrome 还不支持它。

**编辑 哦，我已经检查过了，风格没有被覆盖或任何类似的爵士乐

Answer 1

-moz 是专为 Firefox 保留的 CSS 属性 - 这就是它在 Chrome(以及任何其他浏览器)中不起作用的原因。

更具体地说，每个以 - 开头的 CSS 属性都不是标准的，只适用于特定的浏览器。它仅用于兼容性。如果浏览器不理解该属性的含义，它就会跳过它，这就是为什么在 CSS 文件中有多个属性，这与 -moz 和 -webkit 的原因相同不会在任何地方都有效(不仅对你有效)。

对于兼容 CSS3 的浏览器，它应该是 W3c 约定中的基调，例如

background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);

(颜色不同，注意background: radial-gradient(ellipse ...)

您可以使用 http://www.colorzilla.com/gradient-editor/或任何其他 CSS 渐变生成器，只需将方向设置为径向即可。