曾經(jīng)有很多網(wǎng)站制作者對實現(xiàn)圓角圖片感到很困惑，當(dāng)CSS3誕生之后，這就不再是難題了。css3新增實現(xiàn)圓角的方法有2種，border-raidus和border-image，前一種合適背景是純色填充，或能規(guī)律平鋪，且有純色border的元素。對于圓角元素，我們只需定義背景、邊框和圓角角度。
　　以這個按鈕為例：
　　它的背景是這樣一個內(nèi)發(fā)光、陰影的樣式，平鋪的話陰影還好說，但是左側(cè)的內(nèi)發(fā)光就不好處理，border-image的原理，是將這類圖片分解成一個九宮格：
　　其中1、3、7、9作為四個角的背景；2、4、6、8作為四個邊的背景，如果不想改變原有按鈕設(shè)計質(zhì)感，只能2、8橫向拉伸；中間的5作為中間部分的背景，同樣，要保持設(shè)計質(zhì)感，只能橫向拉伸。第2-5個參數(shù)是九宮格分割時分別距離上、右、下、左的距離，可以簡寫成1-3個，注意，這里的數(shù)值沒有單位，但是可以使用百分比，最后兩個參數(shù)是圖片x、y方向重復(fù)的方式，有round(平鋪)，repeat(重復(fù))，stretch(拉伸)三種方式，默認是stretch，可簡寫成0-1個。對于我們常用的按鈕來說，在橫向無論平鋪、重復(fù)，還是拉伸，效果都是一樣的。
　　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;
　　這個按鈕完整的代碼是這樣的：
　　<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>
　　網(wǎng)站制作實現(xiàn)圓角圖片很簡單吧！注意，這里border-width必須配合使用，分別對應(yīng)九宮格分隔出來的四條邊的寬度。其實即使是九宮格分割出來了4條邊，我們完全可以不使用其中任何一條，只要將這條邊的border-width設(shè)置為0即可，這對用一張完整的圓角圖片實現(xiàn)一對個半圓角按鈕是很有用的.