这类似于从 Soda Theme (Sublime Text 2) 中获取的 Google Chrome 标签样式：
您会看到它有 3 个部分：上升沿、2-3px 平坦中间、下降沿。
问：如何在 CSS 中“重复”中间部分并拉伸制表符以适应字符串的大小？
图像尺寸：42 x 28。
如果它有帮助，这里是.sublime-theme文件的片段：
// Tab element
{
"class": "tab_control",
"content_margin": [12, 3, 12, 3],
"max_margin_trim": 0,
"hit_test_level": 0.0,
"layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
"layer0.inner_margin": [5, 5],
"layer0.opacity": 1.0
},
有很多不同的方法可以实现这种效果，这实际上取决于您的偏好。正如您正确假设的那样，您需要将其视为 3 个不同的部分。因此，最简单的方法是将其分成 3 个不同的图像。
该解决方案还取决于您的 HTML 标记的外观。例如，如果您只有：
<a class="tab" href="#">My Tab</a>
然后，您只有一个可以设置样式的元素来使其工作（这使得它变得更加困难）。
但是，如果您在选项卡周围有一个包装元素：
<li class="tab"><a href="#">My Tab</a></li>
然后，您可以使用 LI 元素来帮助实现所需的结果。
在我的第一个示例中，您只有一个“锚”元素可以使用。检查您要用于选项卡的图像，我可以看到它有一些斜角，并且不是简单的平面颜色，也不是带有简单边框的平面颜色。这意味着我们无法使用直接的 CSS 来实现这种效果，因此我们需要 CSS 来平铺图像。
你有两个选择。
选项1
将图像拆分为两个图像，左侧和右侧，将其从中间向下分割。接下来，在您的图像编辑应用程序中，将您的画布向右扩展，例如 200 像素（或者您认为选项卡的最大宽度）。最后，选择最右边的边缘（这应该是选项卡的中间）并将其水平拉伸到右边框。
您最终应该得到的是倾斜的左侧，然后是约 200 像素的“中间区域”。
现在您有两个图像，我们将调用tab-left-side.png和tab-right-side.png。使用这两个图像，您可以使用以下 CSS 实现选项卡效果：
.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
.tab:after {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
选项 2
此选项需要将您的图像拆分为三个图像。您将拥有tab-left-side.png、tab-middle.png和tab-right-side.png。您可以猜到，您应该将图像适当地分成这些。
现在，您可以使用 CSS：
.tab {
background: url(../images/tab-middle.png) repeat-x 0 0;
overflow: hidden;
color: white;
float: left;
margin: 0 10px; /* must be same as side widths */
}
.tab:after {
content: '.';
overflow: hidden;
text-indent: -999px;
float: right;
width: 17px; /* width of the right edge of the tab */
background: url(../images/tab-right-side.png) no-repeat 0 0;
}
.tab:before {
content: '.';
text-indent: -999px;
overflow: hidden;
float: left;
background: url(../images/tab-left-side.png) no-repeat 0 0;
width: 17px; /* width of the left edge of the tab */
}
双元素的实现方式与单元素示例的选项 1 完全相同，只是您不必使用伪类选择器。如果您编写的代码必须支持不支持伪类选择器（或至少是:beforeand :after）的旧浏览器，那么这是您唯一的选择。
同样，您将两个图像拆分为tab-left-side.png和tab-right-side.png。
然后，你的 CSS：
LI.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
LI.tab A {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
它与选项 1 示例中的 CSS 几乎相同，只是我们更改了选择器。
实现类似结果的另一种方法是使用多个背景和背景大小：
li.tab a {
/* using inline-block for simplicity you could easily switch to
display block and floats. */
display: inline-block;
overflow: hidden;
color: #fff;
padding: 0px 20px;
/* I'm using 75% sizing on my middle image which means my min and
max calculations work out as follows. This can change depening
on the images you use. */
min-width: 80px;
max-width: 160px;
/* height is obviously dependent on many things, I'm using line-height
to center my text but there are other ways. */
height: 26px;
line-height: 30px;
text-align: center;
/* depending on how your images are designed you may wish to have
the left and right images layered on top of the middle. To do this
just reverse the order of the background images. */
background:
url(middle.png) center bottom / 75% 26px no-repeat,
url(left.png) left bottom no-repeat,
url(right.png) right bottom no-repeat
;
}
但是，这确实有一些先决条件：