Question

通常当我使用渐变创建按钮，或使用阴影或圆角创建部分和按钮时，我使用类似以下CSS格式的内容来允许包含的内容为任意长度：

#button {
    height: 40px;
}

.button_edge_left {
    float: left;
    width: 4px;
    height: 40px;
    background: url(images/button-left_static.png);
}

.button_middle_cont {
    float: left;
    padding: 12px 10px;
    font: bold 16px Arial, Helvetica, sans-serif;
    height: 40px;
    background: url(images/button-middle_dynamic.png);
}

.button_edge_right {
    float: left;
    width: 4px;
    height: 40px;
    background: url(images/button-right_static.png);
}

以上是我的CSS，其中.button_edge_left和.button_edge_right充当按钮的结尾（左/右），.button_middle_cont充当可以水平扩展的中间部分。

为了更好的衡量标准，HTML HTML：

<div id="button">
<div class="button_edge_left"></div>
<div class="button_middle_cont">This is a button!</div>
<div class="button_edge_right"></div>
</div>

我想知道是否还有删除两个边缘类，并以某种方式创建一个将所有三个类汇集在一起的元素？

虽然有更多的开销，但从编辑的角度来看，这对页面上的每个按钮都有单独的静态图像要容易得多。

Answer 1

CSS3允许将多个背景图像分配给单个元素。

#button {
    padding: 12px 10px;
    font: bold 16px Arial, Helvetica, sans-serif;
    height: 40px;
    background: url(images/button-left_static.png) left top no-repeat, url(images/button-right_static.png) right top no-repeat, url(images/button-middle_dynamic.png);
}

同样，此解决方案仅适用于符合CSS3标准的浏览器（IE＆gt; = 9，Opera＆gt; = 10.5，Firefox＆gt; = 3.6，Chrome / Safari＆gt; = 1.3）。

这些图像按照它们的顺序堆叠，因此第一个背景图像将是更多前景背景，因此您应该将重复图像放在最后。

使用一个元素创建带阴影/圆角的可扩展按钮/部分？

1 个答案: