1

我正在尝试在 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 还不支持它。

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

4

1 回答 1

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 渐变生成器，只需将方向设置为径向。

于 2013-04-05T21:23:49.080 回答