Question

我想通过向该按钮添加两种不同的平面颜色来为按钮添加CSS样式。按钮的左半部分必须为蓝色，按钮的右半部分必须为红色。

Answer 1

您可以使用渐变作为背景，并将第一种颜色停在50％，然后以50％开始第二种颜色：

button {
  background: -webkit-linear-gradient(blue 50%, red 50%);
  background: linear-gradient(to right, blue 50%, red 50%);
  background: -o-linear-gradient(blue 50%, red 50%);
  background: -moz-linear-gradient(blue 50%, red 50%);
  -webkit-appearance:	none;
  appearance:	none;
  border: none;
  font-size: 15px;
  color: #FFF;
  padding: 8px 16px;
}

<button>Button</button>

如果您想要更改为渐变方向的角度，请在开头使用Xdeg：

button {
  background: -webkit-linear-gradient(-60deg, blue 50%, red 50%);
  background: linear-gradient(-60deg, blue 50%, red 50%);
  background: -o-linear-gradient(-60deg, blue 50%, red 50%);;
  background: -moz-linear-gradient(-60deg, blue 50%, red 50%);;
  -webkit-appearance:	none;
  appearance:	none;
  border: none;
  font-size: 15px;
  color: #FFF;
  padding: 8px 16px;
}

<button>Button</button>

Answer 2

像这样？

button{
    background: -webkit-linear-gradient(left, blue 50%, red 50%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, blue 50%, red 50%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, blue 50%, red 50%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, blue 50%, red 50%); /* Standard syntax */
}

<button>Click here</button>

我想通过向该按钮添加两种不同的平面颜色来为按钮添加CSS样式

2 个答案: