閱讀(60.1k) 書簽贊(5) 我要糾錯(cuò)

實(shí)例解析CSS3圓角的實(shí)現(xiàn)方法

2021-10-15 10:48 更新

過(guò)去如果我們用傳統(tǒng)的方法要實(shí)現(xiàn)圓角邊框，需要使用多張圖片作為背景圖案才可以。CSS3出現(xiàn)后添加了一個(gè)新的屬性border-radius，就可以輕松實(shí)現(xiàn)圓角邊框的效果,一方面省去了制作圖片的時(shí)間，另一方面省去了瀏覽器加載圖片造成的延遲和帶寬。不過(guò)要使用支持該屬性的瀏覽器才能運(yùn)行。主流瀏覽器如Safari，谷歌瀏覽器，IE，Opera和火狐瀏覽器可支持border-radius屬性。

語(yǔ)法

.roundElement	{
	border-radius: 10px;
}

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

如果你覺得上面的寫法太復(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è)角。

實(shí)例解析

首先來(lái)看看效果圖：

HTML代碼：

<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

如果沒有 CSS ，那么上面的 HTML 執(zhí)行起來(lái)是這樣的：

CSS3的編寫：

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
}

一些不同顏色的按鈕樣式：

.green {
    color: #3e5706;
    background: #a5cd4e;
}
 
/* Blue Color */
 
.blue {
    color: #19667d;
    background: #70c9e3;
}
 
/* Gray Color */
 
.gray {
    color: #515151;
    background: #d3d3d3;
}

到這一步后按鈕看起來(lái)是這樣的：

用 CSS 處理圓角：

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
 
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
 
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

現(xiàn)在的按鈕圓潤(rùn)多了，看看：

還不夠啊，沒有立體效果，再完善完善：

/* Green Color */
 
.green {
    color: #3e5706;
 
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
 
/* Blue Color */
 
.blue {
    color: #19667d;
 
    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
 
/* Gray Color */
 
.gray {
    color: #515151;
 
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

現(xiàn)在爽了，漂亮了，你喜歡這樣的按鈕嗎？

為了讓按鈕更大一點(diǎn)，我們?cè)黾恿藗€(gè) big 樣式：

<a href="#" class="button big green">sign in <span>One minute</span></a>
<a href="#" class="button big blue">sign in <span>One minute</span></a>
<a href="#" class="button big gray">sign in <span>One minute</span></a>

/* Big Button Style */
 
.big {
    padding: 0 40px;
    padding-top: 10px;
    height: 45px;
    text-transform: uppercase;
    font: bold 20px/22px Arial, sans-serif;
}
 
.big span {
    display: block;
    text-transform: none;
    font: italic normal 12px/18px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

大按鈕的效果：

我們還需要處理下當(dāng)鼠標(biāo)移到按鈕上方時(shí)顯示不同的效果：

.button:hover {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
.button:active {
    -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

效果如下：

各瀏覽器對(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開發(fā)人員和Web應(yīng)用設(shè)計(jì)人員都很沮喪。在IE9里，最重要的一個(gè)點(diǎn)是使用edge META 標(biāo)記：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

如果你的IE比較老，不支持border-radius，有很多其它的技術(shù)可以彌補(bǔ)這個(gè)缺陷，最好的一個(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腳本：

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>

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);
});

建議你應(yīng)該指定需要使用圓角的元素，因?yàn)樽屇_本搜索整個(gè)頁(yè)面來(lái)尋找需要圓角處理的元素是一個(gè)很耗CPU的過(guò)程，而且這個(gè)過(guò)程是每個(gè)頁(yè)面加載時(shí)都會(huì)執(zhí)行。

以上內(nèi)容是否對(duì)您有幫助：

← CSS3旋轉(zhuǎn)實(shí)例學(xué)習(xí)（附3D旋轉(zhuǎn)實(shí)例）

CSS3陰影實(shí)現(xiàn)方法及技巧全解 →

寫筆記

我要補(bǔ)充

實(shí)例解析CSS3圓角的實(shí)現(xiàn)方法

語(yǔ)法

實(shí)例解析

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

讓IE支持border-radius

推薦文章

推薦教程

推薦課程