HTML按鈕邊框

我想區分一個按鈕，以便客戶端可以看到它是默認情況下加載頁面時按鈕。設計要求在按鈕周圍有一個簡單的邊框。我已經button和button1在我的CSS定義，像這樣：HTML按鈕邊框

.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; 
}

，我試圖把重點的按鈕失去默認格式。我該如何解決這個問題，以便它保持格式化，唯一的區別是按鈕周圍有更粗的邊框？此外，有沒有辦法讓邊框簡單地包裹在按鈕的形狀周圍，而不是矩形邊框？

這裏是什麼我的按鈕看起來像一個形象：

enter image description here

在這種情況下，我試圖把重點放在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'">

來源

2012-01-18 raphnguyen

border-color：＃00ffff; - 這可能會有所作爲 – Silvertiger 2012-01-18 19:58:10

謝謝！那就是訣竅。這樣愚蠢的疏忽。 – raphnguyen 2012-01-18 20:06:41

默認情況下，邊界將是矩形，雖然在一些瀏覽器（不是全部），你可以使用「邊界半徑：5像素」獲得圓角

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」..只是一個選項。還可以更改光標，使其看起來像是在滾動按鈕:)

來源

2012-01-18 19:46:15 Silvertiger

擊敗我吧...你給了更多的信息，很好的補充與使用圖像的實現細節 – 2012-01-18 19:51:18

謝謝。我猜在這種情況下，四捨五入的邊界不是太重要。我只想保留'button'類的默認格式，並且只在按鈕周圍有一個邊框。現在，按鈕標籤默認爲黑色（它應該是藍色），邊框也默認爲黑色（它應該是紅色）。由於我們的網頁僅使用默認的HTML'button'類，所以製作按鈕的圖像看起來並不理想。 – raphnguyen 2012-01-18 19:54:33

一個按鈕不工作的原因是因爲你沒有在課堂上添加引號。是故意的嗎？ – Silvertiger 2012-01-18 19:56:54

用戶界面元素（如按鈕）的默認樣式是用戶代理定義的，AFAIK沒有邊框設置，它將允許你可以在不使用CSS3的border-radius的情況下按照按鈕的輪廓。也許你應該爲沒有預定義形狀的按鈕使用不同的元素，或者使用border-radius（如果適用），或者使用具有所需形狀的背景圖像。

來源

2012-01-18 19:50:14

看來，設置按鈕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>

在Firefox中的呈現在MacOS上，它看起來像這樣：
，並在Safari：

因此，看起來行爲取決於邊界值和瀏覽器。對我來說似乎很古怪，但你在那裏。我認爲這解釋了原始問題中描述的效果。

來源

2014-03-22 07:41:16

在IE中它不起作用。所以，我懷疑這個解決方案是否具有普遍性。 – Intacto 2014-12-10 16:16:44

HTML按鈕邊框

回答

相關問題