javascript - 如何使用图像提供边框和 Angular 在 HTML/CSS3/jQuery/Javascript 中创建一个完美可伸缩的按钮？

Question

如何使用图像提供边框和 Angular 在 HTML/CSS3/jQuery+Plugins 中创建一个完美可缩放的按钮？

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

我的方法是这样的:

<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>

能够解决我的问题的人可以看到问题所在。

根据要求提供更多信息/说明。

编辑:不知道你为什么需要 fiddle ，我的方法很容易解释，如果你不明白的话 Smart way to add corner image to DIV border on all four corners

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

Answer 1

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

http://www.css3.info/preview/border-image/

border-image: url(border.png) 27 27 27 27 stretch stretch;

您可以像这样为 Angular 使用不同的图像:

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