Html 无论宽度如何，按钮/选项卡看起来都一样

我试图实现一个按钮，它看起来是一样的（背景），无论它有多宽（里面的文本越长，按钮越宽）

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

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

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

现在，它将如下所示：

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

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

---

另外，我一秒钟前在MSPaint中绘制了它，所以不要介意曲线的质量或颜色，我只是想让它可见。

在发布之前，你是否尝试过用谷歌搜索它？关于如何做到这一点，有很多网站和例子。尝试搜索“圆角css标签”，看看你得到了什么

这里有两个链接开始，但在未来尝试一个简单的谷歌搜索前张贴一个问题

示例代码来自

#导航a{color:#000；背景：#fb0 url（“left tab.gif”）左上角不重复；文本装饰：无；左填充：10px}
#导航span{background:url（“right tab.gif”）右上方不重复；右填充：10px}
#导航a，#导航a span{显示：块；浮动：左}
#导航a:hover{color:#fff；背景：#26a url（“left tab hover.gif”）左上角不重复；文本装饰：无；填充左上角：10px}
#导航a:hover span{background:url（“right tab hover.gif”）右上方不重复；右填充：10px}
#导航{列表样式：无；填充：0；边距：0}
#导航li{浮点：左；显示：块；边距：0；填充：0}

或更多教程的存储库等：

---

你肯定会在那里找到适合你的东西……

在你发布之前，你有没有在谷歌上搜索过这个？关于如何做到这一点，有很多网站和例子。尝试搜索“圆角css标签”，看看你得到了什么

这里有两个链接开始，但在未来尝试一个简单的谷歌搜索前张贴一个问题

示例代码来自

#导航a{color:#000；背景：#fb0 url（“left tab.gif”）左上角不重复；文本装饰：无；左填充：10px}
#导航span{background:url（“right tab.gif”）右上方不重复；右填充：10px}
#导航a，#导航a span{显示：块；浮动：左}
#导航a:hover{color:#fff；背景：#26a url（“left tab hover.gif”）左上角不重复；文本装饰：无；填充左上角：10px}
#导航a:hover span{background:url（“right tab hover.gif”）右上方不重复；右填充：10px}
#导航{列表样式：无；填充：0；边距：0}
#导航li{浮点：左；显示：块；边距：0；填充：0}

或更多教程的存储库等：

---

如果你想使用最先进的CSS3功能，你可以使用CSS指定多个背景图像，但这不适用于像IE这样的老浏览器

您也可以使用

：：before

和

：：after

伪元素，但这在IE中可能同样不起作用

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

您可以在此处看到每种方法：

---

如果您想使用最先进的CSS3功能，可以使用CSS指定多个

背景图像

，但这不适用于IE等较旧的浏览器

您也可以使用

：：before

和

：：after

伪元素，但这在IE中可能同样不起作用

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

您可以在此处看到每种方法：

---

或者只需将按钮的左侧和右侧添加到按钮内容中即可

像这样：

---

（脏代码和快速代码）

或者只需将按钮的左侧和右侧添加到按钮内容中即可

像这样：

---

（肮脏而快速的代码）

当然，尝试了很多。尝试过寻找标签教程，按钮教程，甚至尝试过键入类似“css中的3个背景图像”或其他内容：PI使用了“圆角css标签”（这正是您正在寻找的），并在第一个结果页上获得了许多有用的网站。也许你的搜索需要更具体地满足你的需求。sitepoint链接提供了代码，bitrepository有很多教程。当然，尝试了很多。尝试过寻找标签教程，按钮教程，甚至尝试过键入类似“css中的3个背景图像”或其他内容：PI使用了“圆角css标签”（这正是您正在寻找的），并在第一个结果页上获得了许多有用的网站。也许你的搜索需要更具体地满足你的需求。sitepoint链接为您提供了代码，bitrepository提供了大量教程。您可以在其中一个内部和外部使用两个div黑色和其他红色，并使用moze边框到半径边框。或者仅使用一个div和一个边框半径…您可以在其中一个内部和外部使用两个div黑色和其他红色，并使用moze border to radius border。或者仅使用一个div和一个border radius…很好的建议：before和：after。非常好的建议，但就像橡皮擦所说的，它在IE中不完全受支持。：before（CSS2符号）甚至在IE9之前都不完全受支持。。。！！很好的建议：before和：after。非常好的建议，但是就像橡皮擦所说的，它在IE中不完全支持：before（CSS2符号）直到IE9才完全支持。。。！！

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