Html 仅使用一个元素创建具有阴影/圆形边缘的可扩展按钮/区域？

通常，当我使用渐变创建按钮，或使用阴影或圆边创建部分和按钮时，我使用类似于以下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\u edge\u left

和

.button\u edge\u right

充当按钮的任一端（左/右），而

。button\u middle\u cont

充当可以水平扩展的中间部分

为了更好地衡量，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>

这是一个按钮！

我想知道是否有必要删除这两个edge类，并以某种方式创建一个将所有三个类合并在一起的元素？

---

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

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>=9、Opera>=10.5、Firefox>=3.6、Chrome/Safari>=1.3）

---

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

Sweet，我会尽快尝试。老实说，我不会为非消费者目标网站的冗余浏览器创建回退，所以CSS3不会成为问题：）！它工作得非常出色，但似乎有100%的宽度（可能这是CSS规范，因为我总是至少设置父容器的宽度，因此它可能需要

主体的宽度
），是否有任何方法可以使它将自身限制为内部内容的宽度？您要求的是“收缩包装”或“收缩以适应“，不幸的是，没有
收缩以适应：true属性。实现这一点有几种方法，每种方法都有各自的优缺点。对于我假设的用途，我建议使用
display:inline块属性可以添加到元素的样式表中。还有其他方法，如
float:left和
显示：内联，但后者不允许您设置高度。太棒了！我应该注意
display:inline block的任何缺点？由于列出每种方法的优点和缺点不适合此评论框，我为您找到了一个非常好的参考资料，希望能更好地解释它们之间的差异，当每种方法都更谨慎时，以及如何克服它们的缺点。特定于
内联块
，您可能会发现多个类似的元素开始在页面上水平“堆叠”，这可能对您的目的有好处，也可能没有好处。