CSS 属性扩展

Question

我是一名网络开发人员，最近看了GMAIL的新LOGIN PAGE预览并有一个登录按钮，我对它的用户界面感到非常兴奋。我对 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

你应该使用 google 来查找此类信息，其中很多信息自 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 .