任何渐变大师都可以将其转换为-webkit？

Question

我有这个为 chrome 制作的 css 渐变：

background-image: linear-gradient(90deg, rgba(200,0,0,.22) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.26) 50%, transparent 50%);
background-size:50px 50px;

但我很想将它移植到 webkit 甚至 moz。 我尝试了很多在线工具，但都没有成功。

Answer 1

您需要为-webkit- 和-moz- 渐变指定方向性。不是假设的。

http://jsfiddle.net/6Yh8R/

div { height: 100px;
    background: -webkit-linear-gradient(left, rgba(200,0,0,.22) 50%, transparent 50%), -webkit-linear-gradient(top, rgba(200,0,0,.26) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgba(200,0,0,.22) 50%, transparent 50%), -moz-linear-gradient(top, rgba(200,0,0,.26) 50%, transparent 50%);
    /*background: linear-gradient(90deg, rgba(200,0,0,.22) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.26) 50%, transparent 50%);*/
    background-size:50px 50px; }

只需取消注释用于生产的规范版本（这样我就可以测试浏览器变体是否有效。）

Answer 2

有一位大师为您服务：http://www.colorzilla.com/gradient-editor/

免费

为了为跨浏览器准备一个 css 级联，它看起来是这样的：

background: -moz-linear-gradient(top, rgba(200,0,0,0.22) 0%, rgba(41,137,216,0.61) 50%, rgba(32,124,202,0.62) 51%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,0,0,0.22)), color-stop(50%,rgba(41,137,216,0.61)), color-stop(51%,rgba(32,124,202,0.62)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);

你会注意到双 -webkit- 声明。