不管寬度如何，按鈕/標籤看起來都一樣

我試圖實現一個按鈕，無論它有多寬（裏面的文本越長，按鈕越寬），它的外觀都一樣（它的背景）。不管寬度如何，按鈕/標籤看起來都一樣

對於按鈕圖像我會用1個像素寬的圖像：

enter image description here - 它具有5個像素黑色頂部，然後35個像素的紅色。我用的是CSS重複背景：

background-image:url('../images/button.png'); 
background-repeat: repeat-x;

現在，它看起來就像這樣：

但我想用這兩個圖像作爲按鈕的左側和右側： enter image description here 所以它想要按鈕彎曲頂部的角落，它會看起來像一個真正的按鈕。它甚至有可能嗎？

所以，問題是，如何使用3張圖像作爲div的背景或其他任何東西，使其看起來像一個整體按鈕，中間部分重複多次，因爲它需要，以填補它。所需外觀： enter image description here

PS。我在一秒前在MSPaint中繪製過，所以不要介意彎曲或顏色的質量，我只是希望它能被看到。

來源

2012-02-19 Kedor

您可以使用拖格內外其中的一個黑人和其他的紅色，並使用moze邊界爲半徑的邊界。 – 2012-02-19 17:43:34

或者只有一個div和邊框半徑... – 2012-02-19 19:00:37

您是否在發佈之前嘗試使用Google搜索？有很多關於如何做到這一點的網站和例子。嘗試搜索「圓角的CSS標籤」，看看你得到什麼...

這裏有2個鏈接開始，但在未來嘗試一個簡單的谷歌搜索之前發佈一個問題。

示例代碼從http://www.sitepoint.com/accessible-menu-tabs/

<ul id="navigation"> 
<li><a href="index.html"><span>Home</span></a></li> 
<li><a href="page1.html"><span>Page 1</span></a></li> 
</ul> 

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px } 
#navigation a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px } 
#navigation a, #navigation a span { display: block; float: left } 
#navigation a:hover { color: #fff; background: #26a url("left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px } 
#navigation a:hover span { background: url("right-tab-hover.gif") right top no-repeat; padding-right: 10px } 
#navigation { list-style: none; padding: 0; margin: 0 } 
#navigation li { float: left; display: block; margin: 0; padding: 0 }

或者更教程等的知識庫：http://www.bitrepository.com/rounded-corners-tab-menus.html

你一定會找到的東西爲你那裏工作....

來源

2012-02-19 17:41:39 FluffyKitten

當然，嘗試了很多。嘗試尋找標籤教程，按鈕教程，甚至嘗試鍵入類似於「3背景圖像在CSS」或其他人：P – Kedor 2012-02-19 17:42:24

我用「圓角的css標籤」（這正是你正在尋找），並得到了很多有用的第一個結果頁上的網站。也許你的搜索需要更具體到你所需要的。 Sitepoint鏈接爲您提供了代碼，而bitrepository有很多教程。 – FluffyKitten 2012-02-19 17:44:49