使用 3 个图像的圆角答案

【问题标题】：Rounded Corners using 3 images使用 3 个图像的圆角
【发布时间】：2010-09-09 05:51:21
【问题描述】：

我可以用 CSS 将三张图片组合成一张吗？基本上，我需要创建圆角按钮，并且我有左、中、右三个图像。

我在所有页面中都使用过，我不可能用两个或三个其他 HTML 控件来替换它。那么有什么方法可以将这些图像组合成一个图像并将该 CSS 类应用于 asp:button 吗？

请不要建议使用border-radius 属性，因为向后支持在这里很重要。提前致谢

【问题讨论】：

【解决方案1】：

阅读推拉门技术

使用左右两个滑动图像创建圆形按钮等。

【讨论】：

【解决方案2】：

最好的方法是修改按钮的 HTML。像这样的东西效果很好：

<button><span>Click Me!</span></button>

我能想到的一种方法是在页面加载后使用 javascript 将 <span> 注入 <button>。

然后你需要为<button> 和<span> 做背景图片。您可能不需要 3 张图片，2 张就足够了，例如，一张是左端。另一个将是一个非常长的右端。使用推拉门技术你可以做一个圆角<button>

您甚至可以使用 1 张图片来完成此操作，该精灵包含我上面提到的两张图片。

【讨论】：