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 缩写。