css - 测试 CSS3 径向渐变 vendor 语法

Question

我在尝试根据我指定的值使用 JavaScript 更新元素的背景渐变时遇到问题。

我试过这条路线:

elem.style.backgroundImage = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 800, from(#ccc), to(#333)), -moz-radial-gradient('+x+'px '+y+'px, circle cover, #ccc 0, #333 100%)';

由于 Webkit 和 Gecko 有两种不同的 CSS3 渐变语法，因此我需要指定两者。但是，上面的代码不起作用。如果我只有 Gecko 语法或只有 Webkit 语法，它就可以工作，而不是两者兼而有之。

我认为您可以检查 CSS 渐变支持，但我的问题是，有没有一种方法可以在不使用浏览器嗅探的情况下检查需要使用哪种语法？请记住，我需要以这种方式设置渐变，因为渐变的 x 和 y 坐标会动态变化。

希望这是有道理的，谢谢。

Answer 1

您根本不需要进行任何检测。只需连续两次设置 element.style.backgroundImage，不解析的将被忽略。