如何使用 CSS 使提交按钮上的角变成正方形答案

【问题标题】：How to use CSS to square the corner on a submit button如何使用 CSS 使提交按钮上的角变成正方形
【发布时间】：2009-09-08 06:15:39
【问题描述】：

如何使提交按钮的角对齐？可以用 CSS 完成吗？我刚刚注意到 Stackoverflow 按钮几乎是一回事（不要因为提及 SO 而关闭它，只是想说明我的意思）。

【问题讨论】：

我认为查看 SO 的源代码会很快；）。

标签： css forms

【解决方案1】：

在您的 css 中使用以下字段和命令：

border-radius:0px

【讨论】：

【解决方案2】：

只需添加 CSS，默认外观就会消失。

input.button, input.submit {
   border: 1px outset blue;
   background-color: lightBlue;
}

edit: 将选择器更改为使用类名，如 cmets 中所建议的那样。

【讨论】：

[type=button] 在某些浏览器上可能并不总是受支持，因此您通常最好将一个类应用于您希望以这种方式设置样式的所有按钮...
提供一个类名不是更好吗？
是的，我只是演示了一种快速设置方法。不过，IE6 之后的几乎所有浏览器都支持这种类型的选择器，因此它可能不是问题。但如果您关心旧浏览器，使用类当然会更好。

【解决方案3】：

您可以使用 HTML 元素代替输入类型。设计那个样式很容易。

【讨论】：

我不太确定你的意思。我的 HTML 看起来像这样
有一个按钮 HTML 元素，它有点像 DIV。看看这篇精彩的文章：particletree.com/features/rediscovering-the-button-element

【解决方案4】：

如果您在 css 中指定高度和宽度，您将使角变成方形，并保留普通按钮所具有的某种程度的自动花哨……这样，您就不必构建自己的.

input.button, input.submit {
   height: 30px;
   width: 20px;
}

我似乎记得这只有在高度足够大的情况下才有效，但它可能会以任何方式工作。

【讨论】：

【解决方案5】：

对元素使用border: 1px solid。

【讨论】：

【解决方案6】：

<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>

这就是stackoverflow按钮的制作方式。

【讨论】：