做圆角的方法有很多种,本文推荐一种做1px圆角的方法。这种方法是从我导师那里学来的,我觉得挺好的,推荐给大家。
HTML:
<div class="corner">
<ul class="tab">
<li class="selected">
<b class="Corner-left"></b>
<b class="Corner-right"></b>
your sister's corner
</li>
<li>
<b class="Corner-left"></b>
<b class="Corner-right"></b>
your sister's corner
</li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
li{
border:1px solid #D2D2D2;
padding:25px;
}
.tab:after{
clear: both;
content: " ";
display: block;
height: 0;
}
.tab li{
float: left;
font-weight: bold;
height: 26px;
line-height: 26px;
margin-right: 2px;
position: relative;
text-align: center;
color:#333333;
}
.tab .selected{
background-color: #FFEAD5;
border:1px solid #FFD6A1;
color:#999999;
}
.Corner-left{
background-color: #FFFFFF;
height: 1px;
left: -1px;
overflow: hidden;
position: absolute;
top: -1px;
width: 1px;
}
.Corner-right{
background-color: #FFFFFF;
height: 1px;
right: -1px;
overflow: hidden;
position: absolute;
top: -1px;
width: 1px;
}
效果如下:
本来在firefox,chrome等浏览器下实现圆角是一件很简单的事情,但由于Ie6的存在,事情变得不那么简单。我们不得不考虑ie6下的实现,处于发泄只能说一句“你妹啊”。
这里的做法就是:将<b>绝对定位到<li>里面,给它们一个像素的宽和高,背景为白色。这样就将tab的一角变成白色,造成一种视觉上的圆角。