-1

cssの背景URLとして3つの画像を使用して、角が丸いリンク/ボタンを作成する方法を探しています。左側の画像は左上と左下の角が丸くなっており、中央の画像は繰り返し可能で、右側の画像は右上と右下の角が丸くなっています。

理想的には、コードはリンクとボタンの両方で機能し、理想的には、各リンクまたはボタンの幅を指定する必要はありません。可能であれば、幅はテキストの幅と、ボタンのマージンまたは幅になります。

これは、Internet Explorer 7-9、およびFirefox、Chrome、Safariの最新バージョンで可能ですか？

4

3 に答える 3

1

こんにちは、3 つの 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/

于 2012-04-05T05:25:03.403 に答える
0

このリンクに表示されているこの水平方向のグループ化されたボタンにjquery mobileを使用できます---->グループ化されたボタン

于 2012-04-05T04:51:03.027 に答える
0

背景画像を事前に分割する必要はありません。このページのボタンを見てください: http://easyhanzi.com/

これは、CSS を使用して分割された 1 つの画像のみを使用して行われます。次に、左に 1 つ、中央に 1 つ、右に 1 つの 3 つの 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;
}
于 2012-04-05T04:46:16.357 に答える