HTML 按钮边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8916270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Button Border
提问by raphnguyen
I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have buttonand button1defined in my css like so:
我试图区分一个按钮，以便客户可以看到它是页面加载时默认处于焦点的按钮。该设计要求按钮周围有一个简单的边框。我button和button1我的CSS定义如下所示：
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
}
.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
border: #00ffff;
border-style: solid;
border-width: 2px;
}
The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?
我试图聚焦的按钮丢失了默认格式。我该如何解决这个问题，以便它只是保持其格式，唯一的区别是按钮周围的边框较粗？另外，有没有办法让边框简单地环绕按钮的形状而不是矩形边框？
Here is an image of what my buttons look like:
这是我的按钮外观的图像：
In this case, I am trying to focus the Jail Addressbutton.
在这种情况下，我试图聚焦Jail Address按钮。
The html for the input buttons is like so:
输入按钮的 html 如下所示：
<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'">
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">
采纳答案by Silvertiger
the border by default is going to be rectangle, though with some browsers (not all) you can use the "border-radius: 5px" to get rounded corners
默认情况下边框将是矩形，但对于某些浏览器（不是全部），您可以使用“border-radius: 5px”来获得圆角
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/rounded-border/
you could also just make images with the buttons you want and use them instead (png is preferred since it will keep transparency)
你也可以只用你想要的按钮制作图像并使用它们（png是首选，因为它会保持透明度）
.button1 {
background-image:url('paper.gif');
background-repeat: no-repeat;
cursor: hand;
}
I use that often instead of just img src=, then you can add an "on mouseclick" with javascript.. just an option. also, the cursor can be changed so it actually looks like they're rolling over a button :)
我经常使用它而不是 img src=，然后你可以用 javascript 添加一个“on mouseclick”..只是一个选项。此外，光标可以更改，因此它实际上看起来像是在按钮上滚动:)
回答by Graham Klyne
It appears that setting a button border:xstyle can completely change the button rendering, at least in Safari and Firefox. Here's a little test file I just used to demonstrate the effect:
似乎设置按钮border:x样式可以完全改变按钮呈现，至少在 Safari 和 Firefox 中是这样。这是我用来演示效果的一个小测试文件：
<html>
<head>
</head>
<body>
<form>
<input type="submit" value="no border"/>
<input type="submit" value="border:0" style="border:0;"/>
<input type="submit" value="border:2" style="border:2;"/>
<input type="submit" value="width:8rem" style="width:8rem;"/>
</form>
</body>
</html>
Rendered in Firefox on MacOS, it looks like this:
and in Safari:
在 MacOS 上的 Firefox 中呈现，它看起来像这样：
在 Safari 中：
So it appears that the behaviour depends on both the border value and the browser. Seems odd to me, but there you are. I think this explains the effect described in the original question.
所以看起来行为取决于边框值和浏览器。对我来说似乎很奇怪，但你就在那里。我认为这解释了原始问题中描述的效果。
回答by James Shuttler
The default stylings for UI elements like buttons are user-agent defined, AFAIK there isn't a border setting which will allow you to follow the contours of the button without using CSS3's border-radius. Perhaps you should use a different element for your buttons that do not have a pre-defined shape, or use border-radius if appropriate, or a background image for which has the shape that you want.
UI 元素（如按钮）的默认样式是用户代理定义的，AFAIK 没有边框设置可以让您在不使用 CSS3 的border-radius 的情况下跟随按钮的轮廓。也许您应该为没有预定义形状的按钮使用不同的元素，或者在适当的情况下使用 border-radius，或者使用具有您想要的形状的背景图像。
