css round corners
I have three images. One for the left, one for the right and one for the middle. This is what i have:
<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"> </div>
i cannot see the left and the right images. just the repeating backer_alt.gif. what am i doing wrong? thx
edited this version works:
<style type="text/css">
img {border:0}
.bl {background: url(images/backer_left.gif) top开发者_如何学Go 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"> </div>
Try setting .tr
’s margin
to 10px instead of its padding
. You also probably need to set the background-position
on .br
to top right
so it appears in the correct place.
As noah says, adding the correct margin left & right to the .tr, depending corner width, will make it appears:
.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; }
精彩评论