如何在HTML/CSS3/jQuery/Javascript中使用图像来提供边框和角点，从而创建一个完全可伸缩的按钮？

如何在HTML/CSS3/jQuery+插件中创建一个完全可伸缩的按钮，使用图像提供边框和角点

我想到了一个绝对混乱的方法，我相信有更好的方法来解决这个问题

我的方法是这样的：

<div class="button-container">  

    // The corners are all the same image, just rotated for the specific corner
    // (using CSS)

    <div class="top-right"></div>
    <div class="bottom-right"></div>
    <div class="top-left"></div>
    <div class="bottom-left"></div>


    // The (height, width) of the top/bottom edge are (5px,1px), so they can
    // repeat-x (or be stretched infinitely with no loss of quality), likewise
    // for the left/right edges, they can repeat-y (or again be stretched).

    <div class="top-edge"></div>
    <div class="bottom-edge"></div>
    <div class="left-edge"></div>
    <div class="right-edge"></div>


    // This simply fills the center of the button, with padding on every
    // edge to allow for transparency on the corners.

    <div class="center-fill"></div>
</div>

border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image

border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

//角点都是相同的图像，只是针对特定的角点旋转
//（使用CSS）
//上/下边缘的（高度、宽度）为（5px、1px），因此它们可以
//重复-x（或无限拉伸，不损失质量），同样
//对于左/右边缘，可以重复-y（或再次拉伸）。
//这只是填充按钮的中心，每个按钮上都有填充
//边缘，以允许角落的透明度。

能解决我的问题的人都知道我的问题在哪里

应要求提供更多信息/澄清

编辑：我不知道你为什么需要小提琴，我的方法很简单，如果你不明白的话

---

但这并不能解决我的问题，我的方法正是我不想用的。我试图制作一个可伸缩的按钮，类似于纯CSS3按钮的可伸缩性。如果我希望图像的上边缘边框是水平拉伸或在x轴上重复的1像素宽5像素高的图像，我必须使用图像。我想要一个用图像和CSS“技巧”构建按钮的优雅解决方案。

尝试使用边框图像，这里给出了一个很好的示例：

您可以对角点使用不同的图像，如下所示：

<div class="button-container">  

    // The corners are all the same image, just rotated for the specific corner
    // (using CSS)

    <div class="top-right"></div>
    <div class="bottom-right"></div>
    <div class="top-left"></div>
    <div class="bottom-left"></div>


    // The (height, width) of the top/bottom edge are (5px,1px), so they can
    // repeat-x (or be stretched infinitely with no loss of quality), likewise
    // for the left/right edges, they can repeat-y (or again be stretched).

    <div class="top-edge"></div>
    <div class="bottom-edge"></div>
    <div class="left-edge"></div>
    <div class="right-edge"></div>


    // This simply fills the center of the button, with padding on every
    // edge to allow for transparency on the corners.

    <div class="center-fill"></div>
</div>

border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image

border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

---

你能提供一把小提琴吗。您试图解决的问题并不明显。我认为这是太多的HTML/CSS，无法创建一个按钮。你想怎么做？另一种方法可能是使用每个边/角10秒的div生成图像层，但这是一个很大的问题，原因很多。请稍候，我将提供进一步的详细说明。我想这样做，这样我就不必为每个按钮创建单独的、大小不同的图形，这样既减少了带宽和时间消耗，又不牺牲质量，以不需要拉伸的方式拉伸东西。非常感谢，我想这正是我想要的。我将升级投票，然后在尝试后接受。祝你好运，将此集成到你的代码中，我发现了另一个很好的网页，解释了css3的技巧：谢谢，它工作得很好，这要感谢你的链接、你对边框图像的建议以及w3schools文档的组合。