在沒有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ī)上的瀏覽器這一項暫時沒用，讓我們先舍棄它吧。
新聞熱點
疑難解答
