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

CSS3實現圓角需要使用border-radius屬性，但因為瀏覽器兼容性的問題，在開發過程中要加私有前綴。

1 2 3 4

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

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

1 2 3 4 5

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

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

1、border-radius單個屬性值：

1 2	//HTML清單 <div?class="roundedCorner">

1 2 3 4 5 6

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

效果：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??　　

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

1 2 3 4 5 6 7

<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值）。

1 2 3 4 5 6 7

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

效果:　

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??　

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

?

2、畫實心圓的方法：

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

1 2 3 4 5 6 7

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

效果：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?　　

?

總結：

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

據w3c上的官方解釋，是這樣子的：

border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四個值，length和%指的是值的單位。

寫過border的人都知道border可以帶四個參數分別設置四個邊框（上左下右的順序），同樣的，border-radius也可以帶四個參數，并且以順時針的方向解析，上左，上右，下右，下左：

1 2 3

.box{ ????border-radius:?5px?10px?20px?50px????????? }

展示結果：

兩個參數的時候，是上左和下右，上右和下左，比如.div1{border-radius: 2em 1em}，就不截圖了，直接demo

三個參數的時候，是上左，上右和下左，下右，比如.div1{border-radius: 2em 1em 3em}，demo

?

那么以斜杠/分開后面的參數是怎么回事呢？是這樣子的，第一個參數表示圓角的水平半徑，第二個參數表示圓角的垂直半徑，所以你現在就可以畫一個左右不對稱的圓角啦：

1	.div1{border-radius:?2em/1em}

?

看到這里你會不會以如果四個圓角都要分別制定特殊的形狀，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那個四個參數一樣的設定（我就是這么以為的），答案是錯！誤！的！因為官方的解釋就是前面放1-4后面放1-4啊！魚不是被吃掉的就是被笨s的~

1 2 3

.div1{ ????????border-radius:10px?20px?30px?40px/40px?30px?20px?10px }

按順時針的順序，斜杠/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，但是通常我們很少寫右邊的參數，那就是默認右邊等于左邊的值。當然你也可以省略一些值，比如這樣子寫.div1{border-radius: 2em 1em 4em / 0.5em 3em;}，解析順序你就可以按照上面的自己推算一下啦。

?

轉載于:https://www.cnblogs.com/lfxiao/p/7234940.html

總結

以上是生活随笔為你收集整理的CSS3属性之圆角效果——border-radius属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。