html - 水平拉伸(stretch)按钮

Question

我的任务是创建带圆 Angular 的按钮，该按钮将水平延伸到容器(现在容器只是 div)。 它应该适用于 IE8 及更高版本。

请问我提供的解决方案是合适的还是有更好的解决方案？

我的解决方案:

.button-streched {
    cursor: pointer;
    width: 100%;
    clear: both;
    background-position: 0px 0px;
}

div.button-show-more div{
    background-repeat: no-repeat;
    height: 34px;
    padding: 0;
}

.button-streched .left {
    float: left;
    background-image: url(/Images/buttton-left.png);
    width: 6px;
    height: 34px;
}

.button-streched .right {
    float: right;
    background-image: url(/Images/buttton-right.png);
    width: 6px;
    height: 34px;
}

.button-streched .middle {
    background-image: url(/Images/buttton-middle.png);
    background-repeat: repeat-x;
    background-color: lightgreen;
    margin: 0px 6px;
    text-align: center;
}

.button-streched span{
    vertical-align: middle;
    line-height: 34px;
}

div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
    background-position: 0 100%;
    cursor: pointer;
}

和 HTML:

<div id="btnButton1" class="button-streched" style="">
    <div class="left"></div>
    <div style="width: 100%;">
        <div class="right"></div>
        <div class="middle">
            <span>Do Some Action</span>
        </div>
    </div>
</div>

缩短版本，只是为了证明它有效: http://jsfiddle.net/xMKhZ/

Answer 1

您可以使用 CSS3 PIE用于呈现几个最有用的 CSS3 装饰功能。