CSS3小分隊-進擊的border-radius，css3border-radius

CSS3小分隊-進擊的border-radius，css3border-radius
上一篇：《CSS float屬性小解——”浮“生若水》

~~強勢插入~~如果有想進一步瞭解float屬性的小夥伴，可以猛戳上面的連結，《CSS float屬性小解——”浮“生若水》這篇文章加入了不少自己的想法，用例子討論了float到底有沒有脫離文檔流這個問題，也許能給你帶來意外的收穫哦~~~~~~

下面切入正題。

當CSS3披荊斬棘來到我們面前，我們看到的是一個操作起來更加簡便、更加炫目的html世界。如果當CSS3完全盛行起來，當多個主流瀏覽器開始相容一個個CSS3屬性，那麼無論是對於前端開發人員，還是對於坐在瀏覽器前瀏覽網頁的我們，都將是一件非常美妙的事情，那時才是“舊時王謝堂前燕，飛入尋常百姓家”。

對於進擊的CSS3小分隊，讓我們依次掀開它們華麗的面紗。第一個出場的是border-radius。

一、CSS2代碼產生圓角

在網頁設計中，圓角可以用來美化地區，在css2中，如果我們要製作一個圓角，方法也不少，只不過都相對複雜。比如，最方便的可以用圓角圖片，但是會增加http請求，使用者體驗稍差，沒有純程式碼來得快捷；用代碼的話可以用多個元素層疊的思想來“堆”出一個圓角，但是代碼較多，看著就煩。當然還有其他方法，小夥伴們可以發揮奇思妙想，但是應該絕對沒有border-radius來得酣暢直接。

不管是不是百戰不殆，知己知彼還是很有必要的，所以在此先用CSS2的代碼來產生圓角來看看效果：

 

思路是用多個div進行疊加，從而得到圓角的效果。上面兩個角和下面兩個角的div類順序相反即可，主體div來確定地區的大小。代碼如下：

HTML Markup

<!--左上方/右上方--><div class="r_top"><div class="r_a"></div><div class="r_b"></div><div class="r_c"></div><div class="r_d"></div><div class="r_e"></div><div class="r_f"></div><div class="r_g"></div><div class="r_h"></div></div><div class="box"><!-- 主體部分 --></div><!--左下角/右下角--><div class="r_bottom"><div class="r_h"></div><div class="r_g"></div><div class="r_f"></div><div class="r_e"></div><div class="r_d"></div><div class="r_c"></div><div class="r_b"></div><div class="r_a"></div></div>View Code

CSS Code

<!--左上方/右上方--><div class="r_top"><div class="r_a"></div><div class="r_b"></div><div class="r_c"></div><div class="r_d"></div><div class="r_e"></div><div class="r_f"></div><div class="r_g"></div><div class="r_h"></div></div><div class="box"><!-- 主體部分 --></div><!--左下角/右下角--><div class="r_bottom"><div class="r_h"></div><div class="r_g"></div><div class="r_f"></div><div class="r_e"></div><div class="r_d"></div><div class="r_c"></div><div class="r_b"></div><div class="r_a"></div></div>View Code

讓我們放大看一下效果：

 

該暴露的都暴露出來了。。。放大後8個div的稜角都顯現無遺。也許在瀏覽網頁的時候很少有人會放大好幾倍去看，但這至少是一個存在的問題。

以上是用CSS2的一種方法做出來的圓角效果，明顯的代碼重複，代碼繁多，放大後還會有稜角出現。如果要用同樣的思路產生一個圓角半徑更大的圓角，而且希望得到的圓角效果更加圓潤，那麼就需要增加更多的標籤，更多重複繁多的代碼，這並不是我們想看到的。

二、CSS3進擊的border-radius

CSS3中加入的border-radius很好的解決了上述的問題，著實給我們帶來了極大的便利。首先來看它的文法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

border-radius是一種簡寫屬性，用來設定border-*-radius的屬性，值可以取數值，也可以取百分數，四個值是按照top-left、top-right、bottom-right、bottom-left的順序即從上開始順時針來設定的。下面分八種情況來討論。

1、border-radius:20px;屬性後只有一個值，那麼即top-left、top-right、bottom-right、bottom-left圓角半徑相等，效果如下：

 

2、border-radius:20px 40px;屬性後有兩個值，那麼即top-left和bottom-right取第一個值，top-right和bottom-left取第二個值，即對角取值，效果如下：

 

3、border-radius:20px 30px 40px;屬性後有三個值，那麼即top-left取第一個值，top-right和bottom-left取第二個值，bottom-right取第三個值，其實還是按照top-left、top-right、bottom-right、bottom-left的順序即從上開始順時針來設定的，因為正常情況下top-right和bottom-left取值相等，所以第三個值自然是bottom-right，效果如下：

 

4、border-radius:20px 30px 40px 50px;屬性後有四個值，那麼按照按照top-left、top-right、bottom-right、bottom-left的順序即從上開始順時針來設定，依次取值，效果如下：

 

以上為基本的四種取值，接下來列出另外四種取值形式，下面四種形式其實是和上面四種形式沒有什麼區別的，只是設定了不同的水平半徑和垂直半徑而已：

5、border-radius:水平半徑/垂直半徑，即border-radius:20px/40px;即四個圓角均取同一個水平半徑和垂直半徑，其實屬於1的變形，效果如下：

 

6、border-radius:水平半徑1 水平半徑2/垂直半徑1 垂直半徑2,即border-radius：20px 30px/40px 50px;即top-left和bottom-right取水平半徑1和垂直半徑1，top-right和bottom-left取水平半徑2和垂直半徑2，其實屬於2的變形，效果如下：

 

7、border-radius:水平半徑1 水平半徑2 水平半徑3/垂直半徑1 垂直半徑2 垂直半徑3,即border-radius：20px 30px 40px/50px 60px 70px;即top-left取水平半徑1和垂直半徑1，top-right和bottom-left取水平半徑2和垂直半徑2，bottom-right取水平半徑3和垂直半徑3，其實屬於3的變形，效果如下：

 

8、border-radius:水平半徑1 水平半徑2 水平半徑3 水平半徑4/垂直半徑1 垂直半徑2 垂直半徑3 垂直半徑4,即border-radius：20px 30px 40px 50px/60px 70px 80px 90px;即順時針依次取值，其實屬於4的變形，效果如下：

 

當然，除了像素等單位，還可以用百分比符號作單位，不要忘記哦~~~~~~~~~

讓我們放大效果看一下：

 

放大以後，圓角依然是像素層級的，一下子感覺整個世界都圓潤起來了呢。

當然，border-radius也可以拆開寫：

border-top-left-radius: <length>  <length>   //左上方border-top-right-radius: <length>  <length>  //右上方border-bottom-right-radius:<length>  <length>  //右下角border-bottom-left-radius:<length>  <length>   //左下角

PS：對於較老的瀏覽器請不要忘記添加可惡的瀏覽器首碼-moz-/-webkit-。

三、這貨能幹什麼

border-radius能幹什麼就是廚師做菜的問題了，不一樣的廚師有不一樣的思想，有不一樣的手藝，做出來的菜肴也千差萬別。

有這樣的菜品：

 

也有這樣的菜品：

 

還有這樣橢圓的菜品：

 

或者來個圓圓的大餅等等：

 

如所示，border-radius為我們產生橢圓和圓提供了很大的便利，也為我們產生更多的圖案提供的更多的可能。

四、小了個結

配合其他屬性，發揮主觀能動性，border-radius可以做出很多優雅的效果。關於border-radius至此告一段落，希望能給需要的朋友帶來協助，有新的想法和問題也歡迎討論，有講的不對的地方還懇請批評指正。

~~再次強勢插入~~如果有想進一步瞭解float屬性的小夥伴，可以猛戳下面的連結，《CSS float屬性小解——”浮“生若水》這篇文章加入了不少自己的想法，用例子討論了float到底有沒有脫離文檔流這個問題，也許能給你帶來意外的收穫哦~~~~~~

 

上一篇：《CSS float屬性小解——”浮“生若水》