无论宽度如何，按钮/标签看起来都相同

Question

我正在尝试实现一个按钮，它看起来相同（它的背景），无论它有多宽（内部文本越长，按钮越宽）。

对于按钮图像，我会使用1像素宽的图像：

- 它顶部有5个像素黑色，然后是35像素红色。我用那个css重复背景：

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

现在，它将如下所示： {{0} }

但我想将这两个图像用作按钮的左侧和右侧： 所以它希望按钮在顶角弯曲，它看起来像一个真正的按钮。它甚至可能吗？

所以，问题是，我如何使用3个图像作为div或任何其他东西的背景，使其看起来像一个整个按钮，中间部分重复多次，根据需要，填充。 期望的外观：

PS。我在一秒前在MSPaint中画过，所以不要介意弯曲或颜色的质量，我只是希望它可见。

Answer 1

您在发布之前尝试使用Google搜索吗？关于如何做到这一点，有很多网站和例子。尝试搜索“带圆角的css标签”，看看你得到了什么......

以下是2个开头的链接，但将来在发布问题之前尝试进行简单的Google搜索。

来自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

你肯定会找到适合你的东西....

Answer 2

如果您想使用尖端的CSS3功能，您可以使用CSS指定多个background-image，但这不适用于IE等旧浏览器。

你也可以使用::before和::after伪元素，但这可能在IE中不起作用。

然后你可以使用图像并将它们向右和向左浮动。

您可以在此处查看每种方法： http://jsfiddle.net/xawQ8/

Answer 3

或者只是将按钮的左侧和右侧添加到按钮内容中。

像这样：

http://jsfiddle.net/rVaPc/ （脏和快速的代码）