Question

我希望能够在网页中动态创建任何颜色的漂亮按钮，而无需提前为每种颜色定义单独的CSS类。

使用带有alpha通道的CSS3渐变似乎是最好的方法来实现这一点，低透明度渐变覆盖在纯色背景上。

但是，我对CSS的了解还不够，甚至不知道这是否可能，更不用说实际实现它了。

我在网上发现了一些看起来会有所帮助的资源：

拥有更多CSS经验的人是否可以告诉我这是否可行，并且可能指向其他资源以使其更容易实现？

Answer 1

使用LESS或SASS之类的内容，这很容易合法地执行。像这样创建一个mixin（健壮的版本）：

.auto-gradient(@color) {

    /* Use any of the built in functions like saturate() or spin() */
    @topcolor: lighten(@color, 20);
    @bottomcolor: darken(@color, 20);

    background: @color;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
    background: -webkit-linear-gradient(@topcolor, @bottomcolor);
    background: -moz-linear-gradient(@topcolor, @bottomcolor);
    background: -ms-linear-gradient(@topcolor, @bottomcolor);
    background: -o-linear-gradient(@topcolor, @bottomcolor);
    background: linear-gradient(@topcolor, @bottomcolor);

        /* If using PIE.htc for IE */
    -pie-background: linear-gradient(@topcolor, @bottomcolor);
    behavior: url(pie.htc);
}

用法：

.my-button {
    .auto-gradient(darkviolet);
}

这将编译为有效的CSS（3），它应该是这样的：

.my-button {
  background:darkviolet;
  background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
  background:-webkit-linear-gradient(#c43aff,#4c006d);
  background:-moz-linear-gradient(#c43aff,#4c006d);
  background:-ms-linear-gradient(#c43aff,#4c006d);
  background:-o-linear-gradient(#c43aff,#4c006d);
  background:linear-gradient(#c43aff,#4c006d);
}

注意：我自己使用lessphp，而我现在使用的版本似乎会阻止像DarkViolet这样的命名颜色被传递给变亮/变暗，除非它们是小写的。

Answer 2

MrOBrian关于Ultimate CSS Gradient Generator的建议使这一点变得轻而易举。这是我最终使用的解决方案，这是一个相对简单的CSS样式，由前面提到的Gradient Generator和Cross-Browser CSS Gradient Button Guide拼凑而成。

以下代码在应用于指定了背景色CSS属性的元素时，会添加漂亮，光滑的按钮外观。这将允许我对所有按钮使用通用样式，使用background-color属性指定颜色。

<强> JSFiddle Demo

感谢您提供所有建议和建议！

任何颜色的渐变按钮的常见CSS样式

2 个答案: