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

Question

我正在尝试实现一个按钮，无论它有多宽(里面的文本越长，按钮越宽)看起来都一样(它的背景)。

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

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

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

现在，它看起来像这样:

但我想将这两个图像用作按钮的左侧和右侧: 所以它希望按钮在顶 Angular 是 flex 的，它看起来像一个真正的按钮。有可能吗？

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

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

Answer 1

您在发布之前是否尝试过谷歌搜索？关于如何执行此操作的网站和示例有很多。尝试搜索“带圆 Angular 的 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

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