CSS3 Gradient Woes

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;

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