html - 跨浏览器格式的 CSS 渐变

Question

我正在开发一个元素，其中按钮需要具有某种样式，例如下面博客上发布的样式:

http://joeygallegos.tumblr.com/

该按钮仅在 Chrome、Safari、Android 和 iPhone/iPod touch 中可见。我想以跨浏览器的格式提供它。我擅长手写CSS，但不太能理解跨浏览器渐变。如果有人可以帮助我更好地掌握它，我将不胜感激。下面是我用来制作渐变的片段:

 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));

---

如果可能的话，我希望它像 Google 的标记一样，具有 -webkit、-moz、-ms、-o、线性等属性:

background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

---

如果您可以用与上面列出的颜色相同的颜色列出它，那将是一个巨大的帮助。谢谢!!

Answer 1

第一个版本的渐变支持以以下形式在 webkit 浏览器中提供:

-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )

您使用的是:

background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));

但后来网络认为这太复杂了，并将其简化为这样(这是大多数浏览器现在使用的):

-prefix-linear-gradient( direction|angle, color-stops... )

您使用的是:

background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

IE 觉得它需要有所不同，因此它使用了滤镜，并且直到 IE10 才升级到这种新的更好的表达渐变的方式。所以，你拥有的一切都很好。如果您想要 IE7-IE9 支持，也可以使用这个:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");

还有很多工具可以帮助您制作渐变并为您生成跨浏览器代码(Google 是您的 friend )。 Colorzilla有一个很好的。