百度知道一张图片实现圆角边框的CSS

平常的圆角边框CSS方法我们都知道了，这里要说的是另一种比较特别的方法，是在百度知道页面里看到的。当时研究了一下，它的圆角边框就用了一张图片，然后把图片的4分之1各放到一个角，就搞掂了。你可以先到百度知道里先看看效果：http://zhidao.baidu.com/

下面的模仿并不是很完美再现百度知道里的CSS，仅作抛砖引玉用。

准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。

示意图：

XHTML代码：

<div id="father">
<h1>一张图片实现圆角</h1>
<b class="lt"></b>
<b class="rt"></b>
<b class="lb"></b>
<b class="rb"></b>
</div>
四个 b 为小容器，不要管它们，放上去就是了。

CSS代码：

*{
margin:0;
padding:0;
}
#father{
position:relative;
margin:20px auto;
padding:20px;
width:400px;
height:50px;
border:1px solid #000;
}
b{
position:absolute;
width:5px;
height:5px;
font-size:0;
background-image:url(images/yuan8.jpg);
background-repeat:no-repeat;
}
.lt{
left:-1px;
top:-1px;
background-position:left top;
}
.rt{
right:-1px;
top:-1px;
background-position:right top;
}
.lb{
left:-1px;
bottom:-1px;
background-position:left bottom;
}
.rb{
right:-1px;
bottom:-1px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}

这种方法似乎很完美，但遗憾的是：如果父容器（ #father）的高度为奇数时，在 IE6 里下方会出现一条横线，如下图：

所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。

另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美。

其实，百度知道所用的代码是：（自己试试吧）

XHTML 代码：

CSS 代码：

.box1{
background:url(images/bg1.gif) repeat-x #1d6cb7;
margin-top:1em;
position:relative;
zoom:1;
width:778px;
}
.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {
width:5px;
height:5px;
position:absolute;
background:url(images/bg3.gif) no-repeat;
overflow:hidden;
}
.box1 .cc{
height:40px;
padding:5px;
}
.box1 .tl {
left:0;
top:0;
}
.box1 .tr {
right:0;
top:0;
background-position:0 -5px;
}
.box1 .bl {
left:0;
bottom:0;
background-position:0 -10px;
}
.box1 .br {
right:0;
bottom:0;
background-position:0 -15px;
}

Trackbacks: