Question

如果我使用webkit-appearance：按钮，如何更改按钮的默认样式。我喜欢这样做。

div {

      webkit-appearance:button
      background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

Answer 1

这不起作用。 -webkit-appearance用于更改某些内容的默认外观，通常设置为none。如果您希望它的外观和行为类似于默认按钮，请使用<button>元素。否则，请删除webkit外观，然后根据需要设置样式。

Answer 2

您的代码存在一些问题。首先，没有 - 在webkit前面：

-webkit-appearance:button

其次，-webkit-apperance:button;上没有结尾分号，并且铬渐变不需要浏览器前缀：

div {

      webkit-appearance:button
      background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

修改您的编码：

div {

      -webkit-appearance:button;
      background: -webkit-linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

JSFiddle
另外，正如其他人所说，如果你使用apperance：button;并尝试使用CSS编辑它，外观不再有效。如果您想要按钮的外观，请使用<button>元素。

Answer 3

我认为您尝试选择按钮的方式是错误的。如果要使用线性渐变设置常规<button>元素的样式，则CSS选择器需要如下所示：

<强> HTML

<button>Hello World</button>

<强> CSS

button {
    background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);
}