HTML 按钮边框

Question

我试图区分一个按钮，以便客户可以看到它是页面加载时默认处于焦点的按钮。该设计要求按钮周围有一个简单的边框。我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;
}

我试图聚焦的按钮丢失了默认格式。我该如何解决这个问题，以便它只是保持其格式，唯一的区别是按钮周围的边框较粗？另外，有没有办法让边框简单地环绕按钮的形状而不是矩形边框？

这是我的按钮外观的图像：

在这种情况下，我试图聚焦Jail Address按钮。

输入按钮的 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'">

Answer 1

默认情况下，边框将是矩形，但在某些浏览器（不是全部）中，您可以使用“border-radius: 5px”来获得圆角

http://www.css3.info/preview/rounded-border/

你也可以只用你想要的按钮制作图像并使用它们（png是首选，因为它会保持透明度）

.button1 {
    background-image:url('paper.gif');
    background-repeat: no-repeat;
    cursor: hand;
}

我经常使用它，而不仅仅是 img src=，那么你可以使用 javascript 添加“on mouseclick”..只是一个选项。另外，光标可以改变，所以它实际上看起来像是在按钮上滚动:)