css - 给定一个带有边框的图像按钮，如何在 CSS 中拉伸(stretch)/重复中间部分以获得可变长度的内容？

Question

这类似于取自 Soda Theme (Sublime Text 2) 的 Google Chrome 标签页样式:

您会看到它有 3 个部分:上升沿、2-3px 平坦中间、下降沿。

问:在 CSS 中，我如何“重复”中间部分并拉伸(stretch)制表符以适应字符串的大小？

图像尺寸: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
    },

Answer 1

有多种不同的方法可以实现这种效果，具体取决于您的偏好。正如您正确假设的那样，您需要将其视为 3 个不同的部分。因此，最简单的方法是将其分成 3 个不同的图像。

解决方案还取决于您的 HTML 标记的外观。例如，如果您只有:

<a class="tab" href="#">My Tab</a>

那么你只有一个元素可以设置样式来实现它(这使得它变得更难)。

但是，如果标签周围有一个环绕元素:

<li class="tab"><a href="#">My Tab</a></li>

然后您可以使用 LI 元素来帮助实现所需的结果。

单元素

在我的第一个示例中，您只有一个“ anchor ”元素可以使用。检查您要用于选项卡的图像，我可以看到它有一些斜 Angular ，并且不是简单的平面颜色，也不是带有简单边框的平面颜色。这意味着我们无法通过直接 CSS 实现该效果，因此我们需要 CSS 来平铺图像。

你有两个选择。

选项 1

通过将图像从中间向下分割，将图像分成两幅图像，左侧和右侧。接下来，在您的图像编辑应用程序中，将您的 Canvas 向右扩展，比方说，200 像素(或者您认为选项卡的最大宽度是什么)。最后，选择最远的右边缘(这应该是选项卡的中间)并将其一直水平拉伸(stretch)到右边界。

您最终应该得到的是倾斜的左侧，然后是大约 200 像素的“中间区域”。

现在您有两个图像，我们将调用 tab-left-side.png 和 tab-right-side.png。有了这两张图片，你就可以用下面的CSS来实现tab的效果了:

.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 完全相同，只是您不必使用伪类选择器。如果您编写的代码必须支持不支持伪类选择器(或至少 :before 和 :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 相同，只是我们更改了选择器。