Question

我正试图在镀铬中获得椭圆渐变。我试过了

    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还没有支持它。

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

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

Chrome中的CSS3 Elliptical Gradient

1 个答案: