这些类型的渐变可以在CSS中完成吗？

Question

我已经看过CSS渐变属性，并且想知道这些类型的渐变是否可以通过Compass或vanilla CSS在浏览器中完成？我似乎无法弄明白该怎么做。

Answer 1

我强烈推荐这个渐变编辑器：

http://www.colorzilla.com/gradient-editor/

您可以使用css轻松完成许多不同且复杂的渐变。

Answer 2

是的，他们可以：

background: rgb(252,215,51);
background: -moz-linear-gradient(top, rgba(252,215,51,1) 50%, rgba(246,185,51,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(252,215,51,1)), color-stop(50%,rgba(246,185,51,1)));
background: -webkit-linear-gradient(top, rgba(252,215,51,1) 50%,rgba(246,185,51,1) 50%);
background: -o-linear-gradient(top, rgba(252,215,51,1) 50%,rgba(246,185,51,1) 50%);
background: -ms-linear-gradient(top, rgba(252,215,51,1) 50%,rgba(246,185,51,1) 50%);
background: linear-gradient(to bottom, rgba(252,215,51,1) 50%,rgba(246,185,51,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd733', endColorstr='#f6b933',GradientType=0 );

这里有效：http://jsfiddle.net/KueLJ/1/

注意：使用http://www.colorzilla.com/gradient-editor/生成

Answer 3

使用Compass的一个非常简单，干净且方便的解决方案：http://codepen.io/anon/pen/HCexj