1. 程式人生 > >CSS3筆記:Border-radius的形成原理

CSS3筆記:Border-radius的形成原理

一.前言

最近自己寫了一個導航欄,馬馬虎虎就是嘖個樣紙:

 


其中的圓角做了好久,就是嘖個:

 

既然用到了,我就在這總結一下圓角border-radius的用法,閒話不多說,進入正題。

二.border-radius的幾種常用的寫法

border-radius:20px;

border-radius:20px 20px 20px 20px;

或者border-radius:20px/20px;

或者border-radius:20px 20px/20px 20px;

或者border-radius:20px 20px 20px/20px 20px 20px;

border-radius:20px 20px 20px 20px/20px 20px 20px 20px;

可以說,最後一種才是完整的寫法,前面幾種均是它的簡寫。(當然,其中的值我們也可以用百分比來寫);

那麼,我們以最後一種為例,其中各值分別表示啥子呢?

20px 20px 20px 20px/20px 20px 20px 20px其對應的值所作用的相應物件分別為:

(水平半徑:左上 右上 右下 左下)/(垂直半徑:左上 右上 右下 左下)

我們這裡說這是指半徑,那這個半徑是啥子嘞?理解這個,就很好理解border-radius如何建立圓角。

三.Border-radius如何實現圓角

首先,廢話不多說,以實物為例:

<div id="main"></div>

#main{

width:100px;

height:100px;

background:red;

border:50px solid green;

border-radius:70px 0 0 0/70px 0 0 0;

}


我們會想,左上角的圓角是如何形成的,這裡就要用到剛剛說的垂直半徑與水平半徑,怎麼說呢,我們用兩張圖來表示:


而我們的圓角就是上圖中的左上圓角,即下圖中黃色的部分


現在知道border-radius的圓角是怎麼來的了吧。類似的,其他的圓角也是一樣的。

但是也有一些特例,比如:

#main{

width:100px;

height:100px;

background:red;

border:50px solid green;

border-radius:0 100px 0 0/0 100px 0 0;

}

<div id="main"></div>

 

但是,假如我們border-radius設為border-radius:0 300px 0 0/0 300px 0 0;我們會發現結果和上面的一樣,這是為哈?

哥們,從上面,我們知道圓角其實就是一個圓(正圓和橢圓)的一個四分之一弧,而我們上面的div塊高寬加上邊框也才200px的畫素,也就是說上面這種情況,咱能承受的最大垂直半徑和水平半徑分別是也就是200px,按照鑫神(我開頭參考的文章作者)的說法,這叫大值特性,也就是我能構建的最大的弧也只能是200px的水平垂直半徑的弧,故而,顯示的結果和之前是一樣的。

不過,肯定馬上有哥們出來反駁我:假如我border-radius設為border-radius:0 400px 0 0/0 200px 0 0;結果就是不一樣的,好,我們來試試,結果是這樣的:

 

還真的是不一樣嘞!!!

好,這裡還有個東西沒有講,再引用鑫神的文章,CSS3圓角除了大值特性,還有一個等比例特性,就是水平半徑和垂直半徑的比例是恆定不變的。所以,上一個例子中,我們水平半徑和垂直半徑的比例應該為21,然後根據大值特性,首先,我們的水平半徑為200px的畫素,那我們垂直半徑為100px,故而是上面的效果。

最後,咱還有一個東西遺漏了,就是當咱單獨設定某一個圓角時,比如:border-top-left-radius:40px;(border-top-left-radiustop在前left在後)

它的格式需要注意的是,它最多隻能填兩個值,填一個值時表示的是垂直半徑與水平半徑為同一個值,當填兩個值時,兩值分別表示的是水平半徑與垂直半徑。

四.總結

通過圓角來設計一些佈局效果是一項非常麻煩的事,雖然看起來簡單,不過它代替了以前用圖片來實現效果的方式,減少了記憶體的佔用。另外,凡事眼見為實,不懂不知道就去測試就是了,別等著別人來告訴你,你會收穫很多,而且別人寫的東西也有可能有錯誤也說不定。