-1

如何在 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>

可以解决我的问题的人会看到它的发展方向。

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

编辑：不知道为什么你需要一个小提琴，我的方法很容易解释，如果你想不通，智能的方法将角图像添加到所有四个角的 DIV 边框

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

4

1 回答 1

2

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

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

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

http://www.css3.info/images/border-image1.gif

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

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
于 2013-11-01T09:30:09.417 回答