在沒有css3 以前，或者說，在webkit沒有占絕對的優(yōu)勢以前，圓角對于制作經(jīng)理來說，都是一個糾結(jié)的死角。九宮格、N層div嵌套、一個圖片的十八般切法，甚至不 惜恐嚇威脅設(shè)計師：你再做圓角，我就死給你看！好吧，到了高端手機(jī)時代，這一切恩怨都可以拋下了，一個html元素、幾行css，全部搞定。現(xiàn)在我們可以 擁抱設(shè)計師，大聲宣布：讓我們盡情圓角吧！事情要從我們無線的第一個高端手機(jī)web應(yīng)用——手機(jī)微博高端版說起，作為一個完全針對高端手機(jī)的web項目， 經(jīng)過我們初步測試，css3的絕大多數(shù)屬性都能在iPhone、Android這些高端手機(jī)自帶瀏覽器上完美表現(xiàn)，那么，此時不用更待何時？！于是，我們 的設(shè)計gg就有了一次痛快淋漓的圓角體驗，請看這些圓角們：

　　css3新增實現(xiàn)圓角的方法有2種，border-raidus和border-image，前一種合適背景是純色填充，或能規(guī)律平鋪，且有純色border的元素，例如這些：

　　對于這類圓角元素，我們只需定義背景、邊框和圓角角度。以這個按鈕元素為例：

　　背景切片btn_bg.png，圖片寬度從1px到100px，是降低平鋪資源消耗還是節(jié)約流量請自己把握，這個你懂的：

這個按鈕完整的代碼是這樣的：

<style type="text/css">
.btn-send{
display:inline-block;
background:url(blogimg/btn_bg.png) left top repeat-x;
border:1px solid #96b9de;
-webkit-border-radius:3px;
-moz-border-radius:3px;
height:28px;
line-height:28px;
padding:0 9px;
text-decoration:none;
color:#000000;
font-size:12px;
font-weight:bold;
text-shadow: 0px 0.5px 0.5px #FFFFFF;
}
</style>

<a href="#" class="btn-send">發(fā)私信</a>

　　其中-webkit開頭的屬性針對webkit內(nèi)核瀏覽器生效，就是我們的iPhone、Android高端機(jī)自帶瀏覽器，-moz開頭的屬性 主要是因為一般調(diào)試都是在firefox下進(jìn)行，為調(diào)試時展示正常效果而加。有些人還會再加個border-radius，這個大概對Chrome和 ie9生效，對目前高端手機(jī)上的瀏覽器這一項暫時沒用，讓我們先舍棄它吧。

　　另外，需要說明的是，border-radius，顧名思義，是要有border，才有radius，設(shè)置border-radius時，border-width不能為0。而類似這樣直接給圖片定義圓角的設(shè)計，趕緊給我住手！

　　其中，對于一些只有半邊有圓角的對象，還可以單獨定義，webkit和moz下單獨定義每個圓角的屬性分別如下：

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;

　　而border-image適合背景不能完全平鋪、填充色值的圓角元素。顧名思義，這個屬性其實就是用一張基本圓角圖片來實現(xiàn)圓角的效果，例如這些：

　　這類元素或多或少，因為一兩個像素的陰影、發(fā)光效果不能完全平鋪，就可以利用border-image的九宮格原理，由一張圖片來定義背景、邊 框、圓角。這種做法的缺陷是邊框、圓角和背景都是圖片上固定的，只能水平或垂直拉伸元素寬度，不能直接通過css修改角度和元素高度或?qū)挾取１M管如此，我 們還是要感謝這個css屬性帶來的全新體驗。

以這個按鈕為例：

它的背景是這樣一個內(nèi)發(fā)光、陰影的樣式，平鋪的話陰影還好說，但是左側(cè)的內(nèi)發(fā)光就不好處理：

border-image的原理，是將這類圖片分解成一個九宮格：

其中1、3、7、9作為四個角的背景；

2、4、6、8作為四個邊的背景，如果不想改變原有按鈕設(shè)計質(zhì)感，只能2、8橫向拉伸；

中間的5作為中間部分的背景，同樣，要保持設(shè)計質(zhì)感，只能橫向拉伸。

border-image的具體寫法是：

-webkit-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat;
-moz-border-image:url(blogimg/border.png) 5 5 5 5 repeat repeat;

其中第一個參數(shù)是圖片路徑；

第2-5個參數(shù)是九宮格分割時分別距離上、右、下、左的距離，可以簡寫成1-3個，注意，這里的數(shù)值沒有單位（幾次效果沒出來，查了半天發(fā)現(xiàn)都是因為這里習(xí)慣性的加了px，杯具），但是可以使用百分比；

最后兩個參數(shù)是圖片x、y方向重復(fù)的方式，有round（平鋪），repeat（重復(fù)），stretch（拉伸）三種方式，默認(rèn)是stretch，可簡寫成0-1個。

對于我們常用的按鈕來說，在橫向無論平鋪、重復(fù)，還是拉伸，效果都是一樣的。

這個按鈕完整的代碼是這樣的：

<style type="text/css">
.btn-more{display:inline-block;
-webkit-border-image:url(blogimg/btn_2_bg.png) 5;
-moz-border-image:url(blogimg/btn_2_bg.png) 5;
border-width:5px;
height:27px;
line-height:27px;
padding:0 60px;
text-decoration:none;
color:#FFFFFF;
font-size:13px;
font-weight:bold;
text-align:center;
text-shadow: 0px 0.5px 0.5px #000000;
}</style>
<p><a href="#" class="btn-more">查看更多</a></p>

注意，這里border-width必須配合使用，分別對應(yīng)九宮格分隔出來的四條邊的寬度。其實即使是九宮格分割出來了4條邊，我們完全可以不使用 其中任何一條，只要將這條邊的border-width設(shè)置為0即可，這對用一張完整的圓角圖片實現(xiàn)一對個半圓角按鈕是很有用的：

另外，在有border-image的情況下，定義其他樣式的border都是無效的。

好吧，最后，按照慣例，我們要感謝國家、感謝組織、感謝iPhone、感謝喬布斯，讓我們有了這一次偉大的實踐機(jī)會！愿web標(biāo)準(zhǔn)早日一統(tǒng)天下，我們才能真正暢享css3的美好世界！

(本文出自Tencent WSD Blog，轉(zhuǎn)載時請注明出處)