|
秦歌(YanKaven) 的站點(diǎn)：http://dancewithnet.com/
兩年前發(fā)表的《The visual design of Web 2.0》中提到“Rounded everything”，圓角因使人感覺舒適的友好風(fēng)格而變得無處不在。這個(gè)無處不在也讓很多前端工程師累個(gè)半死，YAHOO Performance Research Engneer Team 的Nicole在講演《Designing Fast Websites》中用的副標(biāo)題是don’t blame the rounded corners!，從側(cè)面也說明了圓角給實(shí)現(xiàn)者帶來的困擾：實(shí)現(xiàn)麻煩、兼容困難、性能不佳。而W3C早在 2002年的CSS3草案 中就加入了一個(gè)叫 border-radius 的屬性，通過它可以直接來定義HTML元素的圓角。
CSS3的border-radius規(guī)范
最新草案 中其主要信息如下：
- 屬性：
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
值：<length> <length>?。它們分別是定義角形狀的四分之一橢圓的兩個(gè)半徑。如圖：
- 第一個(gè)值是水平半徑。
- 如果第二個(gè)值省略，則它等于第一個(gè)值，這時(shí)這個(gè)角就是一個(gè)四分之一圓角。
- 如果任意一個(gè)值為0，則這個(gè)角是矩形，不會(huì)是圓的。
- 值不允許是負(fù)值。
- 屬性：border-radius。它是上面四個(gè)屬性值的簡(jiǎn)寫。
值：<length>{1,4} [ / <length>{1,4} ]?
- 如果斜線前后的值都存在，那么斜線前的值設(shè)置水平半徑，且斜線后的值設(shè)置垂直半徑。如果沒有斜線，則水平半徑和垂直半徑相等。
- 四個(gè)值是按照top-left、top-right、 bottom-right、 bottom-left的順序來設(shè)置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
- 應(yīng)用范圍：所有的元素，除了table的樣式屬性border-collapse是collapse時(shí)
- 內(nèi)邊半徑等于外邊半徑減去對(duì)應(yīng)邊的厚度。當(dāng)這個(gè)結(jié)果是負(fù)值時(shí)，內(nèi)邊半徑是0。所以內(nèi)外邊曲線的圓心并不一定是一致的。
- border-radius也會(huì)導(dǎo)致該元素的背景也是圓的，即使border是none。如果background-clip是padding-box，則背景（background）會(huì)被曲線的內(nèi)邊裁剪。如果是border-box則被外邊裁剪。border和padding定義的區(qū)域也一樣會(huì)被曲線裁剪。
- 所有的邊框樣式（solid、dotted、inset等）都遵照角的曲線。如果設(shè)置了border-image，則曲線以外的部分會(huì)被裁剪掉。
- 如果角的兩個(gè)相鄰邊有不同的寬度，那么這個(gè)角將會(huì)從寬的邊平滑過度到窄的邊。其中一條邊甚至可以是0。
- 兩條相鄰邊顏色和樣式轉(zhuǎn)變的中心點(diǎn)是在一個(gè)和兩邊寬度成正比的角上。比如，兩條邊寬度相同，這個(gè)點(diǎn)就是一個(gè)45°的角上，如果一條邊是另外一條邊的兩倍，那么這個(gè)點(diǎn)就在一個(gè)30°的角上。界定這個(gè)轉(zhuǎn)變的線就是連接在內(nèi)外曲線上的兩個(gè)點(diǎn)的直線
- 角不允許相互重疊，所以當(dāng)相鄰兩個(gè)角半徑的和大于所在矩形區(qū)域的大小時(shí)，用戶代理（瀏覽器）比如縮小一個(gè)或多個(gè)角半徑。運(yùn)算法則如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在矩形區(qū)域的寬，Lleft = Lright = 所在矩形區(qū)域的高。如果f < 1，那么所有角半徑都乘以f。
瀏覽器支持
實(shí)際中，目前沒有任何一款瀏覽器支持這個(gè)屬性，只有部分瀏覽器利用其私有屬性支持部分實(shí)現(xiàn)：
- Firefox對(duì)border-radius的支持：
-moz-border-radius: <length>{1,4} | inherit
-moz-border-radius-bottomleft : <length> | inherit
-moz-border-radius-bottomright : <length> | inherit
-moz-border-radius-topleft : <length> | inherit
-moz-border-radius-topright : <length> | inherit
- 只對(duì)每個(gè)角設(shè)置一個(gè)半徑，只支持實(shí)現(xiàn)四分之一圓角，并不支持橢圓形圓角。
- 具體每個(gè)角的命名規(guī)則也和W3C不一致，這個(gè)比較討厭。
- Firefox3圓角已經(jīng)相當(dāng)圓滑了，F(xiàn)irefox2比較糟糕，好在它即將終結(jié)了。
- Safari和Chrome對(duì)border-radius的支持：
-webkit-border-radius: <length>{1,2} | inherit
-webkit-border-bottom-left-radius : <length>{1,2} | inherit
-webkit-border-bottom-right-radius : <length>{1,2} | inherit
-webkit-border-top-left-radius : <length>{1,2} | inherit
-webkit-border-top-right-radius : <length>{1,2} | inherit
- 每個(gè)屬性有1個(gè)或2個(gè)值，當(dāng)有兩個(gè)值時(shí)1個(gè)表示水平半徑，一個(gè)表示垂直半徑writing-mode改變也隨之而變）。所以，Safari和Chrome中的圓角可以是橢圓角。
- webkit的實(shí)現(xiàn)方法和 W3C的CSS3草案2005年版本 非常一致，和當(dāng)前的草案最大不同就是簡(jiǎn)寫屬性-webkit-border-radius的屬性值也只有1個(gè)或2個(gè)值，意義和前面相同。
- Chrome中圓角鋸齒比較嚴(yán)重，基本上和Firefox2是同一水平，或許是它的webkit版本較低造成的。
- 由于webkit出生于khtml，所以把 上面屬性中的webkit換成khtml即會(huì)得到以khtml為核心的瀏覽器支持的屬性了。
- 當(dāng)相鄰的角半徑之和大于所在矩形區(qū)域的大小時(shí)，都會(huì)直接設(shè)置所有的角半徑為0，即圓角失效，而不會(huì)像Firefox那樣同比率縮小。
- Opera尚不支持border-radius，雖然 Opera10 alpha擁有眾多的CSS3改進(jìn)，但是依舊看不到對(duì)其支持的希望。
- IE就不用說了，標(biāo)準(zhǔn)的不支持了。從MSDN的 CSS Compatibility and Internet Explorer 中可以看出IE8已經(jīng)鐵定不支持了。
實(shí)際應(yīng)用
最簡(jiǎn)單的應(yīng)用就是支持的用圓角，不支持的用方角。比如Wordpress2.7的后臺(tái)、雅虎口碑UED 的blog和 今天你帶傘了嗎? 。基礎(chǔ)代碼如下：
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
實(shí)現(xiàn)請(qǐng)看演示實(shí)例。
利用VML可以實(shí)現(xiàn)從IE5-7的圓角 ，但是貌似IE8不支持VML了。組件DD_roundies 就是綜合以上解決方案的一個(gè)具體應(yīng)用。說實(shí)話這樣實(shí)現(xiàn)出來的圓角也比較粗糙了，我感覺還不如不要。
像VML一樣，Canvas也能實(shí)現(xiàn)圓角，切除了IE外，所有的主流瀏覽器都支持。所以就有了兩者結(jié)合實(shí)現(xiàn)的組件 Cornerz 。
如果上面的現(xiàn)實(shí)太痛苦，而又非要用圓角的話，要么一個(gè)像素一個(gè)像素去拼裝，比如Chunky Borders；要么就老老實(shí)實(shí)用圖片來實(shí)現(xiàn)吧，比如 CSS Mojo 的方式。
本文鏈接：http://www.95time.cn/tech/web/2008/6355.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
