CSS3中的优步酷线性渐变

Question

是否可以创建（没有图像），看起来很酷的线性渐变，就像你在Ribbon菜单控件中看到的那样？

有没有人知道任何教程，文章资源或展示/展示这种渐变的样本？

Answer 1

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

我过去曾经用过这个。这很好，因为它产生了许多渐变的味道，因为确切的语法还没有很好地定义。

Answer 2

背景渐变：

background: -moz-linear-gradient(center top , #ededed, #ededed) repeat scroll 0 0 transparent;
border: 1px solid #e1e1e1;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ededed));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #ededed, #ededed);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed)";

文字阴影效果：

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);