Question

我是一名网络开发人员，我最近查看了GMAIL的新LOGIN PAGE预览，并且有一个登录按钮，我对它的UI感到非常兴奋。我做了一些Page的CSS手术，发现了一些属性，如：

**background-color: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);**

现在有人可以告诉我如何使用这些CSS扩展属性最大化所有流行浏览器的页面优化。我的意思是这些扩展或其他好东西都有参考链接。

感谢。

Answer 1

您应该使用谷歌查找此类信息，其中很多信息自2010年初以来一直存在。

但以下是浏览器特定渐变代码的一些示例：

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

取自here。

Answer 2

找出哪个浏览器支持哪个选择器与测试有很多关系。

如果您只需要跨浏览器渐变，请使用http://www.colorzilla.com/gradient-editor/（也支持IE6-9）。

要找出哪个浏览器http://caniuse.com是一个很好的资源支持哪种技术。

Answer 3

这里有一个非常全面的Mozilla CSS扩展列表（或者只是尚未完全标准化的内容）：https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

还尝试列出http://webdesign.about.com/od/css/a/css-extensions.htm下所有供应商特定的CSS属性，但它可能相当不完整且过时 - 这个区域变化很快。最后，你应该更好地看一下CSS3。要么已经列出了一个功能，这意味着供应商前缀可能很快就会被删除 - 或者它不是，然后在生产网页中使用此功能是不可取的（其含义可能会发生显着变化，或者浏览器可能会完全停止支持它）。

Answer 4

这是我一直留在我身上的一个列表作为参考点。

我希望这对你有用吗</ p>

http://qooxdoo.org/documentation/general/webkit_css_styles

CSS属性扩展

4 个答案: