CSS3梯度问题

Question

我一直依赖优秀的彩色渐变工具来创建我的跨浏览器友好的渐变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多填充。当前对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;

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