2

我一直依靠优秀的 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;

任何人都可以通过供应商前缀等提供有关此最佳顺序/变化的一些指示，以使其能够在所有现代浏览器中工作？

4

1 回答 1

2

我对此进行了测试，它可以在所有现代浏览器中随心所欲地工作。但是，如果您希望在大多数浏览器（包括旧浏览器）上获得支持，我建议使用 CSS3 polyfill.. 当前对 CSS 渐变的支持可在此处找到。

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 。

于 2013-08-27T17:16:44.003 回答