高娟 王小巍 張衛(wèi)清

關(guān)鍵詞：圓角矩形;CSS;border-radius屬性

中圖分類號：TP393.0

文獻(xiàn)標(biāo)識碼：A

1.背景圖片實(shí)現(xiàn)圓角

這種方法實(shí)現(xiàn)圓角是最原始的方法。隨著CSS技術(shù)的發(fā)展其實(shí)現(xiàn)方式也變得多種多樣，下面介紹一種應(yīng)用比較廣泛的“寬度固定，高度自適應(yīng)”圓角。

其實(shí)現(xiàn)關(guān)鍵點(diǎn)由4個塊級標(biāo)簽構(gòu)成：圓角矩形容器（box）—設(shè)置固定寬度，同圓角寬度;頂部圓角（radius-top）—使用背景圖片實(shí)現(xiàn)頂部圓角;內(nèi)容（content）—放置主體內(nèi)容;底部圓角（radius-bottom）—使用背景圖片實(shí)現(xiàn)頂部圓角。

所需的背景圖片如圖1所示。

HTML代碼：

<div class="box">

<div class="top_radius"></div>

<div class="content ">圓角矩形</div>

<div class="btm_radius"></div>

</div>

CSS代碼：

.box{width：595px;background：#ebf3ff;}

.top_radius{background：url（/img/t_radius.jpg） no-repeat; height：3px;}

.btm_radius{background：url（/img/b_radius.jpg） no-repeat; height：3px;}

.content{padding：5px;}

2.CSS2.0+標(biāo)簽?zāi)M圓角

這種方法實(shí)現(xiàn)圓角的原理是應(yīng)用像素畫中繪制弧線的方法進(jìn)行模擬，在PS中將弧線放大后發(fā)現(xiàn)，弧線其實(shí)是由一個一個的像素點(diǎn)按照一定的弧形排列形成的，圓角矩形亦是如此。將圓角矩形放大后發(fā)現(xiàn)，矩形的頂部或底部的圓角可由2個寬度不同的盒子堆砌進(jìn)行模擬（如圖2所示）。以頂部盒子為例，從上到下的2個盒子的外邊距分別為2px，1px。

HTML代碼：

<div class="box">

<div class="radius_border_1"></div>

<div class="radius_border_2"></div>

<div class="content">圓角矩形</div>

<div class="radius_border_2"></div>

<div class="radius_border_1"></div>

</div>

CSS代碼：

.box{ width：340px;}

.radius_border_1{margin：0 2px;height：1px;background：#acc3e3;}

.radius_border_2{margin：0 1px;height：1px;background：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3;}

.content{background：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3; padding：20px;}

3.CSS3.0圓角屬性實(shí)現(xiàn)圓角

CSS3中新增了border-radius屬性，使用它可以設(shè)計(jì)元素以圓角樣式顯示。但是，目前該屬性還不被IE8及其以前版本的瀏覽器所支持。Presto引擎和IE9+支持border-radius標(biāo)準(zhǔn)屬性，Webkit引擎支持-webkit-border-radius私有屬性，Mozilla Gecko引擎支持-moz-border-radius私有屬性。

HTML代碼：

<div class="box">圓角矩形</div>

CSS代碼：

.box{width：292px;height：32px;padding：0 5px;border：1px solid #9dadc6;-moz-border-radius：2px;-webkit-border-radius：2px;border-radius：2px;}

4.三種方法的比較

可以看出，第一種方法的優(yōu)點(diǎn)是無需多余標(biāo)簽，能夠?qū)崿F(xiàn)個性化的圓角，將設(shè)計(jì)師的設(shè)計(jì)完美地以代碼實(shí)現(xiàn)，但其缺點(diǎn)是增加了HTTP請求和頁面字節(jié)數(shù)。第二種方法優(yōu)點(diǎn)是用純CSS代碼實(shí)現(xiàn)，易于維護(hù)，體積小，但其缺點(diǎn)是圓角像素越大，無意義標(biāo)簽越多，圓角越發(fā)呆板且只能實(shí)現(xiàn)純色圓角，局限性大。第三種方法優(yōu)點(diǎn)是專用CSS代碼，易于維護(hù)，體積小，圓角自然圓滑，但其缺點(diǎn)是存在兼容性問題。

參考文獻(xiàn)：

[1]生力軍.CSS圓角矩形實(shí)現(xiàn)方法比較研究[J].電腦知識與技術(shù)，2013（36）.

[2]周劍強(qiáng).基于CSS技術(shù)的圓角矩形的實(shí)現(xiàn)[J].忻州師范學(xué)院學(xué)報，2010（5）.