Question

.gradient {
background: -moz-radial-gradient(right bottom , circle farthest-corner, #CDCFD1 20%,     #696C71 70%) repeat scroll 0 0 transparent;

我想采用该规则并将其应用于支持线性渐变的所有浏览器。有人可以告诉我代码是什么样的，以支持所有其他支持它的浏览器上面的径向渐变，即chrome，Internet Explorer，safari等。

提前致谢。

Answer 1

你无法在一行代码中使渐变与所有浏览器兼容。你必须为不同的浏览器添加更多兼容的行......这就是..

background: rgb(105,108,113); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(105,108,113,1) 30%, rgba(205,207,209,1) 81%, rgba(205,207,209,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(30%,rgba(105,108,113,1)), color-stop(81%,rgba(205,207,209,1)), color-stop(100%,rgba(205,207,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(105,108,113,1) 30%,rgba(205,207,209,1) 81%,rgba(205,207,209,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(105,108,113,1) 30%,rgba(205,207,209,1) 81%,rgba(205,207,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(105,108,113,1) 30%,rgba(205,207,209,1) 81%,rgba(205,207,209,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(105,108,113,1) 30%,rgba(205,207,209,1) 81%,rgba(205,207,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#696c71', endColorstr='#cdcfd1',GradientType=1 ); /* IE6-9 */

Answer 2

看看这个：http://css3please.com/

这也可能有用：http://www.colorzilla.com/gradient-editor/

Answer 3

使用http://gradients.glrzad.com/或http://www.colorzilla.com/gradient-editor/支持所有浏览器。

将-moz-radial-gradient转换为所有其他支持的浏览器

3 个答案: