CSS实例教程:1张照片完成圆角

2020-10-28 07:51 jianzhan

提前准备4个小器皿,各自放小圆圈照片的左上、右上、左下、右下4个一部分,随后再各自精准定位到父器皿的4个角上。
1张照片就可以完成圆角?是甚么样的照片?如何完成?
实际上这张照片是1个小圆圈,以下面的事例即将应用的照片为 10 * 10 尺寸的照片: ,很小了是吧,但是早已够了。
基础思路
提前准备4个小器皿,各自放小圆圈照片的左上、右上、左下、右下4个一部分,随后再各自精准定位到父器皿的4个角上。
照片示意:

编码完成
XHTML编码: <div id="container">
<h1>1张照片完成圆角</h1>
<b class="lt"></b>
<b class="rt"></b>
<b class="lb"></b>
<b class="rb"></b>
</div>
4个 b 为小器皿,不必管它们,放上去便是了。
CSS编码: *{
margin:0;
padding:0;
}
#container{
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:⑴px;
top:⑴px;
background-position:left top;
}
.rt{
right:⑴px;
top:⑴px;
background-position:right top;
}
.lb{
left:⑴px;
bottom:⑴px;
background-position:left bottom;
}
.rb{
right:⑴px;
bottom:⑴px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}
这类方式好像很完善,但遗憾的是:假如父器皿(本例为 #container)的高宽比为基数时,在 IE6 里正下方会出現1条横线,以下图:

因此,假如应用这类方式,就要操纵好父器皿,使它的高宽比为偶数。
此外:因为 IE 默认设置行高,b{height:5px} 会沒有实际效果,因此再加了 font-size:0 清除了这个 bug ,尽管 overflow:hidden 还可以清除这个 bug ,但本例中不合适用这类方式,不然在 IE 中下半一部分的圆角会沒有实际效果或实际效果有缺憾(IE bug 真多 -_-!)。