今天就跟大家聊聊有關(guān)CSS3中怎么實(shí)現(xiàn)圓角效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)成都做網(wǎng)站、網(wǎng)站建設(shè)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷、軟文營(yíng)銷等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來(lái)效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

語(yǔ)法和說(shuō)明

在CSS3中用來(lái)生成圓角效果的屬性是border-radius.這個(gè)屬性跟大家熟知的width等屬性的用法相似：

代碼如下:

.roundElement {
border-radius: 10px;
}

上面的這句代碼的作用是設(shè)置一個(gè)元素的四個(gè)角的弧度半徑值都為10px。你也可以對(duì)每個(gè)角單獨(dú)指定：

代碼如下:

.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}

如果你覺(jué)得上面的寫法太復(fù)雜，可以使用下面border-radius簡(jiǎn)寫的方法：

代碼如下:

.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}

四個(gè)值分別代表的是top-left, top-right, bottom-right, bottom-left四個(gè)角。

各瀏覽器對(duì)border-radius的支持

因?yàn)檫@種圓角技術(shù)是CSS3里出現(xiàn)的，老式瀏覽器或較早期的瀏覽器中用到這個(gè)屬性時(shí)需要在CSS里添加瀏覽器引擎前綴(vendor prefixes)。會(huì)是{prefix}-border-radius這樣一個(gè)樣子，而具體各種瀏覽器引擎前綴是下面這樣的寫法：

代碼如下:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;

/* 火狐瀏覽器 */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */

/* webkit引擎的瀏覽器 */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

基本上，你需要對(duì)每種瀏覽器引擎做各自的聲明，加上這些討厭的稍微不同的代碼來(lái)保證完全支持border-radius。但是，如果你使用的是最新版的瀏覽器，包括火狐、谷歌、IE等，你不需要使用這些前綴，因?yàn)檫@個(gè)技術(shù)已經(jīng)很成熟，在各種最新版的瀏覽器里已經(jīng)受到了普遍支持。

讓IE支持border-radius

直到IE9才有對(duì)border-radius屬性的支持，相信很多Web開(kāi)發(fā)人員和Web應(yīng)用設(shè)計(jì)人員都很沮喪。在IE9里，最重要的一個(gè)點(diǎn)是使用edge META 標(biāo)記：

代碼如下:

如果你的IE比較老，不支持border-radius，有很多其它的技術(shù)可以彌補(bǔ)這個(gè)缺陷，我遇到過(guò)的最好的一個(gè)解決方法是使用一個(gè)很小的JavaScript程序包，叫做CurvyCorners。這個(gè)CurvyCorners用javaScript動(dòng)態(tài)的生成很多div標(biāo)記，用這些div標(biāo)記來(lái)繪出圓角效果，甚至支持消除鋸齒功能。

CurvyCorners的用法很簡(jiǎn)單。第一步是在頁(yè)面中引入CurvyCorners.js腳本：

代碼如下:

CurvyCorners會(huì)在DOM元素里尋找具有border-radius屬性的元素，然后依次給它們制作出圓角效果。不需要輔助圖片。你甚至可以設(shè)置指定元素的弧度半徑：

代碼如下:

var settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
 curvyCorners(settings,rd);
});

看完上述內(nèi)容，你們對(duì)CSS3中怎么實(shí)現(xiàn)圓角效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。