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

Question

我看过 CSS 渐变属性，想知道这些类型的渐变是否可以使用 Compass 或 vanilla CSS 跨浏览器完成？我似乎无法弄清楚该怎么做。

Answer 1

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

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

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

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

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