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圓角除了大值特性,還有一個等比例特性,就是水平半徑和垂直半徑的比例是恆定不變的。所以,上一個例子中,我們水平半徑和垂直半徑的比例應該為2:1,然後根據大值特性,首先,我們的水平半徑為200px的畫素,那我們垂直半徑為100px,故而是上面的效果。
最後,咱還有一個東西遺漏了,就是當咱單獨設定某一個圓角時,比如:border-top-left-radius:40px;(border-top-left-radius中top在前left在後)
它的格式需要注意的是,它最多隻能填兩個值,填一個值時表示的是垂直半徑與水平半徑為同一個值,當填兩個值時,兩值分別表示的是水平半徑與垂直半徑。
四.總結
通過圓角來設計一些佈局效果是一項非常麻煩的事,雖然看起來簡單,不過它代替了以前用圖片來實現效果的方式,減少了記憶體的佔用。另外,凡事眼見為實,不懂不知道就去測試就是了,別等著別人來告訴你,你會收穫很多,而且別人寫的東西也有可能有錯誤也說不定。