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

Question

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

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

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 用于此链接中显示的水平分组按钮----> Grouped Buttons