css round corner

私は3つの画像を持っています。左に1つ、右に1つ、中央に1つ。これは私が持っているものです。css round corner

<style type="text/css"> 
img {border:0} 

.bl {background: url(images/backer_left.gif) top left no-repeat; height:47px; } 
.br {background: url(images/backer_right.gif) top right no-repeat; height:47px;} 
.tr {background: url(images/backer_alt.gif) ; margin:0 4px 0 4px; font-size:12px; height:47px;} 
.trText { padding:10px; } 
.clear { clear:both; } 
</style> 
<div class="bl"> 
    <div class="br"> 
    <div class="tr"> 
     <div class="trText">lay lay lomm</div> 
    </div> 
    </div> 
</div> 
<div class="clear">&nbsp;</div>

私は左右の画像を見ることができません。ちょうど繰り返すbacker_alt.gif。私は間違って何をしていますか？このバージョンを編集した THX

は動作します：

<style type="text/css"> 
img {border:0} 

.bl {background: url(images/backer_left.gif) top left no-repeat; height:47px; } 
.br {background: url(images/backer_right.gif) top right no-repeat; height:47px;} 
.tr {background: url(images/backer_alt.gif) ; margin:0 4px 0 4px; font-size:12px; height:47px;} 
    .trText { padding:10px; } 
.clear { clear:both; } 
</style> 
<div class="bl"> 
    <div class="br"> 
     <div class="tr"> 
      <div class="trText">lay lay lomm</div> 
     </div> 
    </div> 
</div> 
<div class="clear">&nbsp;</div>

出典

2011-07-13 CFNinja

あなたはCSS 'ボーダー・radius'スタイルを使用して検討していますか？それはずっと簡単です。 –

IEの以前のバージョンではサポートされていないと思います。 – CFNinja

そうではありません。しかし、最近、私は本当にこのたくさんの時間とこのたくさんのコードを費やさず、サイトの全体的な使い勝手にはまったく関係しない、古いブラウザで何かを修正するために多くの帯域幅を費やしています。あなたはいつもその議論に勝つことはできません。 –

はそのpaddingの代わりに10pxのために.trのmarginを設定してみてください。からtop rightにbackground-positionを設定して、正しい場所に表示されるようにする必要があります。

出典

2011-07-13 16:44:56

ノアは正しいマージンがコーナー幅を依存し、右.trに&を残し、はそれが表示されますようになります追加、言うように：

.bl {background: url(images/backer_left.gif) no-repeat left top; } 
.br {background: url(images/backer_right.gif) no-repeat right top; } 
.tr {background: url(images/backer_alt.gif) repeat-x; margin:0 10px; padding:10 0; }

出典

2011-07-13 16:50:45

答えて

関連する問題