10

我想知道是否有人知道为什么“提交”按钮的“默认”样式看起来相当不错（角落略微圆润，从上到下有一些渐变等）但是当我添加背景颜色时，它会变成 1990 年代的时代带有 2px 边框的方形按钮......看起来很糟糕。

我可以以某种方式保留大部分默认样式但更改背景颜色吗？谢谢！

4

4 回答 4

4

浏览器带有一大组默认样式，如果网站未设置样式，则可以使它们看起来很漂亮。例如，Firefox 为默认提交按钮定义了以下样式：

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}

-moz-appearance是一个非标准属性，它将样式定义为与操作系统的默认按钮样式一致。这就是为什么它在不同的操作系统上看起来也会有所不同。

于 2012-12-31T17:15:06.413 回答
2

只需一点 CSS，您就可以制作漂亮的按钮。查看这些参考资料：

http://webdesignerwall.com/tutorials/css3-gradient-buttons

http://css3button.net/

于 2012-12-31T17:21:55.130 回答
2

“问题”是默认背景是一个相当复杂的渐变。

我建议你使用像jQuery UI或Bootstrap这样的框架来设计你的按钮。这比在自己的背景渐变中搜索按钮要容易得多，并且您可能会获得更好的结果。

于 2012-12-31T17:02:18.183 回答
2

您的（现代）浏览器（或类似 bootstrap 的 css 框架）包含提交按钮的默认样式（因此它看起来"pretty good (corners slightly rounded, some gradient from top to bottom, etc.)"不像 1990 年的按钮）。

当您在 css 中覆盖这些渐变时（通过更改background-color），您将覆盖浏览器使用的那些编程默认值。您可以制作自己的漂亮渐变，而不仅仅是更改背景颜色。而且，正如@ŠimeVidas 在评论中指出的那样，更改背景颜色也将删除默认值border-style。

我建议使用渐变生成器，而不是简单地更改background-color.

于 2012-12-31T17:03:12.503 回答