CSS3屬性之圓角效果——border-radius屬性

標籤：dex   項目需求   設定   屬性   images   相容   20px   margin   問題   

 

在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裡：http://www.hicss.net/css-practise-of-image-round-box/)。實現過程很繁瑣，但CSS3的到來簡化了實現圓角的方式。

CSS3實現圓角需要使用border-radius屬性，但因為瀏覽器安全色性的問題，在開發過程中要加私人首碼。

1234	-webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius

　border-radius屬性其實可以分為四個其他的屬性：

12345

border-radius-top-left         /*左上方*/border-radius-top-right       /*右上方*/border-radius-bottom-right /*右下角*/border-radius-bottom-left   /*左下角*///提示：按順時針方式

下面用幾個執行個體來展示border-radius的具體用法。

1、border-radius單個屬性值：

12	//HTML清單<div class="roundedCorner">

123456

.roundedCorner{    width:100px;    height:100px;    background-color:#f90;    border-radius:10px;//左上，右上，右下，坐下都是10px}

效果：

                                            　　

2、border-radius是個屬性值方式：

1234567

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清單.roundedCorner2{    width:100px;    height:100px;    background-color:#f99;    border-radius:20px 10px 5px 2px;}

　效果：

                                           　

不過在開發的過程中(我的工作中),經常用到的是border-radius單屬性值，設定4個不同圓角的情況很少。

border-radius的優勢不僅僅在製作圓角的邊框，還是利用border-radius屬性來畫圓和半圓。

1、製作半圓的方法：

元素的高度是寬度的一半，左上方和右上方的半徑元素的高度一致（大於高度也是可以的，至少為height值）。

1234567

<div class="semi-circle"></div>.semi-circle{    width:100px;    height:50px;//高度是寬度的一半    background-color:#000;    border-radius:50px 50px 0 0;//左上和右上至少為height值}

效果:　

                                                    　

知道了如何畫上半圓，就會舉一反三畫其他方向的圓了，這裡不再贅述。

 

2、畫實心圓的方法：

寬度和高度一致(正方形)，然後四個角設定為高度或者寬度的1/2.

1234567

<div class="circle"></div>.circle{    width:100px;    height:100px;    background-color:#cb18f8;    border-radius:50px;}

效果：

                                                     　　

 

總結：

CSS3實現圓角的方式既優雅又方便，但是相容性不夠好，如果需要考慮舊版本的瀏覽器的話，可以考慮優雅降級的方式。開始提到的兩種方式的優點是相容性好，但不夠優雅。

使用哪種方式，看具體的項目需求吧。

CSS3屬性之圓角效果——border-radius屬性