css圆角答案 - 爱码网

【问题标题】：css round cornerscss圆角
【发布时间】：2011-07-13 16:37:47
【问题描述】：

我有三张图片。一个用于左边，一个用于右边，一个用于中间。这就是我所拥有的：

 <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。我究竟做错了什么？谢谢

已编辑此版本有效：

 <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>

【问题讨论】：

您是否考虑过使用 CSS border-radius 样式？简单多了。
我认为早期版本的 IE 不支持它。
不是。但是这些天来，我真的为不花这么多时间、这么多代码和这么多带宽来修复一个错误的旧浏览器中的某些东西而奋斗，这实际上与网站的整体可用性无关。不过，你不能总是赢得这场争论。

标签： css image html repeat

【解决方案1】：

尝试将.tr 的margin 设置为10px，而不是padding。您可能还需要将.br 上的background-position 设置为top right，以便它出现在正确的位置。

【讨论】：

【解决方案2】：

正如 noah 所说，在 .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; }

【讨论】：