CSS3 渐变问题

Question

我一直依赖优秀的 colorzilla 渐变工具来创建我的跨浏览器友好的渐变 CSS - 但它正在努力重新创建已经在某些浏览器中工作的现有渐变。我无法完全正确地组合供应商前缀和回退，以使其目前在所有方面都可靠地工作。

现有的(适用于 FF/Chrome)CSS 是:

background: radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;

谁能给出一些关于使用供应商前缀等的最佳顺序/变体的指示，以允许它在所有现代浏览器中工作？

Answer 1

我对此进行了测试，它可以在所有 现代 浏览器中正常运行。但是，如果您希望支持大多数浏览器(包括旧浏览器)，我建议使用 CSS3 polyfill。当前发现支持 CSS 渐变 here .

background: -webkit-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: -moz-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: -o-radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;
background: radial-gradient(ellipse farthest-corner at center top , #00B9E6 0%, #00B9E6 38%, #003766 68%) repeat fixed 0 0 transparent;

你也可以使用 less 如果您想避免重复的 -moz、-o、-webkit 缩写。