Question

我正在寻找一种方法在css中使用三个图像作为背景网址来创建带圆角的链接/按钮。左侧有一个图像，左上角和左下角有圆角，中间的图像可重复，右边的图像右上角和右下角有圆角。

理想情况下，代码可以同时适用于链接和按钮，理想情况下，我不需要为每个链接或按钮指定宽度。如果可能，宽度将是文本的宽度和一些边距或按钮的宽度。

这适用于Internet Explorer 7-9以及最新版本的Firefox，Chrome和Safari吗？

Answer 1

您可以定义三个div并定义属性，如下所示

您可以在背景中定义图像替换为颜色。

<强> CSS

a{
    display:inline-block;
}

.left, .middle, .right{
    float:left;
    height:100px;
    width:100px;
}

.left{
    background:yellow url(../..) no-repeat ;
}

.middle{
    background:red url(../..) repeat-x;
    width:auto;
    line-height:100px;
}

.right{
    background:green url(../..) no-repeat;
}

<强> HTML

<a href="">
<span class="left"></span>
<span class="middle">Heere you text </span>
<span class="right"></span>
</a>

现场演示http://jsfiddle.net/rohitazad/HAjLZ/

Answer 2

您无需预先分割背景图像。请查看此页面上的按钮：http://easyhanzi.com/

这只使用一个使用CSS分割的图像来完成。然后有三个DIV - 一个左，一个中心和一个右。内容可以有任何宽度。

这是HTML：

<div id="download-button">
    <div id="download-button-left"></div>
    <div id="download-button-middle">
        <center><div id="download-button-main-text">Download free trial</div><div id="download-button-subtext">Version 3.1 for Windows</div></center>
    </div> <!-- download-button-middle -->
    <div id="download-button-right"></div>
</div>

和CSS：

#download-button-left {
    float: left;
    background: url(img/download-button.png) 0 0;
    width: 12px;
    height: 85px;
}

#download-button-middle {
    color: #ffffff;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 15px;

    float: left;
    background: url(img/download-button.png) -12px 0;
    width: auto;
    padding-left: 20px;
    height: 70px;
}

#download-button-right {
    float: left;
    background: url(img/download-button.png) -399px 0;
    width: 12px;
    height: 85px;
}

Answer 3

您可以将jquery mobile用于此链接中显示的水平分组按钮----＆gt; Grouped Buttons

使用三个图像和CSS的按钮的圆角

3 个答案: