純代碼實現CSS圓角

我這里說的是純代碼，是指的不使用圖片實現圓角，圖片實現圓角，這里就不說了。

純代碼實現圓角主要有3種方法：

第一種：CSS3圓角

copytext

#chaomao{
    border-radius:2px 2px 2px 2px;
}

 上面代碼的意思是左上、右上、右下、右下分別2px的圓角

當然也可以簡寫：border-radius:2px

方向是從左上到左下逆時針

也可以分別指定

copytext

#chaomao{
    border-top-left-radius:4px 2px;
    border-top-right-radius:3px 4px;
    border-bottom-right-radius:6px 2px;
    border-bottom-left-radius:3px 4px;
}

 意思很簡明

火狐等瀏覽器也支持自己的私有圓角屬性

Firefox支持border-radius(圓角)：-moz-border-radius:2px

webkit內核的Safari和Chrome支持border-radius(圓角)：-webkit-border-radius:2px

Opera支持border-radius(圓角)：border-radius:2px

CSS3實現圓角最簡單了，可惜IE6-8不支持

第二種：用CSS+html代碼

百度知道的首頁圓角就是用這種方法實現的

有點：兼容所有瀏覽器，

缺點：需要添加額外的HTML標簽，維護比較麻煩

 實現原理是利用多個空層，上面一層比下面少1px，從而使邊角看起來是一個圓弧狀

HTML代碼：

copytext

<div>
    <strong class="b1"></strong>
    <strong class="b2"></strong>
    <strong class="b3"></strong>
    <strong class="b4"></strong>
    <div class="content">文字內容</div>
</div>

CSS代碼

b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
    height:1px;
    font-size:1px;
    overflow:hidden;
    display:block;
}
.b1,.b8{
    margin:0 5px;
}
.b2,.b7{
    margin:0 3px;
    border-right:2px solid;
    border-left:2px solid;
}
.b3,.b6{
    margin:0 2px;
    border-right:1px solid;
    border-left:1px solid;
}
.b4,.b5{
    margin:0 1px;
    border-right:1px solid;
    border-left:1px solid;
    height:2px;
}

 

copytext

第三種：利用jQuery圓角插件代碼實現圓角

優點：兼容所有瀏覽器

缺點：需要使用jQuery插件

這是一個jQuery插件，使用的時候，需要jQuery文件一起，使用方法很簡單

$("#chaomao").corner("5px")

它就實現了id值問哦chaomao的元素，5px的圓角
jQuery圓角插件