一个 html 按钮中有两种不同的渐变答案

【问题标题】：Two different gradients in one html button一个 html 按钮中有两种不同的渐变
【发布时间】：2014-09-05 01:33:46
【问题描述】：

我想要做的是我想保持 html 按钮的前 50% 有一个从 #FFF 到 #BBB 的渐变，而底部 50% 应该保持一种颜色，比如 #111。我想不出办法，任何帮助将不胜感激。

我的按钮代码是：

<button class="Button1" type="submit">Submit</button>

【问题讨论】：

看看这个：stackoverflow.com/questions/4094444/…

标签： html css gradient linear-gradients

【解决方案1】：

css：

.Button1 {
    background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}

这在最新的浏览器中应该可以解决问题。让它跨浏览器兼容取决于你。（我个人喜欢http://www.colorzilla.com/gradient-editor/的Photoshop风格的界面）

【讨论】：

【解决方案2】：

这是来自 Bootstrap 的示例，它可以帮助您处理按钮渐变。这也涵盖了大多数现代浏览器。

.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

希望有所帮助。（这些是蓝绿色的，所以你必须改变那部分）

【讨论】：