圆角你妹啊圆角

做圆角的方法有很多种，本文推荐一种做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的一角变成白色，造成一种视觉上的圆角。