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

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


語法

.roundElement	{
	border-radius: 10px;
}
上面的這句代碼的作用是設(shè)置一個元素的四個角的弧度半徑值都為10px。你也可以對每個角單獨指定：角的弧度半徑值都為10px。你也可以對每個角單獨指定：
.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}
如果你覺得上面的寫法太復(fù)雜，可以使用下面border-radius簡寫的方法：
.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}
四個值分別代表的是top-left, top-right, bottom-right, bottom-left四個角。

實例解析

首先來看看效果圖：

實例

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í)行起來是這樣的：

沒有CSS的效果

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

到這一步后按鈕看起來是這樣的：

css按鈕

用 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)在的按鈕圓潤多了，看看：

圓角按鈕

還不夠啊，沒有立體效果，再完善完善：
/* 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)在爽了，漂亮了，你喜歡這樣的按鈕嗎？

圓角按鈕2

為了讓按鈕更大一點，我們增加了個 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)移到按鈕上方時顯示不同的效果：

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

效果如下：

CSS3圓角

各瀏覽器對border-radius的支持

因為這種圓角技術(shù)是CSS3里出現(xiàn)的，老式瀏覽器或較早期的瀏覽器中用到這個屬性時需要在CSS里添加瀏覽器引擎前綴(vendor prefixes)。會是{prefix}-border-radius這樣一個樣子，而具體各種瀏覽器引擎前綴是下面這樣的寫法：
-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 */
基本上，你需要對每種瀏覽器引擎做各自的聲明，加上這些討厭的稍微不同的代碼來保證完全支持border-radius。但是，如果你使用的是最新版的瀏覽器，包括火狐、谷歌、IE等，你不需要使用這些前綴，因為這個技術(shù)已經(jīng)很成熟，在各種最新版的瀏覽器里已經(jīng)受到了普遍支持。

讓IE支持border-radius

直到IE9才有對border-radius屬性的支持，相信很多Web開發(fā)人員和Web應(yīng)用設(shè)計人員都很沮喪。在IE9里，最重要的一個點是使用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ù)可以彌補這個缺陷，最好的一個解決方法是使用一個很小的JavaScript程序包，叫做CurvyCorners。這個CurvyCorners用javaScript動態(tài)的生成很多div標(biāo)記，用這些div標(biāo)記來繪出圓角效果，甚至支持消除鋸齒功能。

CurvyCorners的用法很簡單。第一步是在頁面中引入CurvyCorners.js腳本：

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>
CurvyCorners會在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)該指定需要使用圓角的元素，因為讓腳本搜索整個頁面來尋找需要圓角處理的元素是一個很耗CPU的過程，而且這個過程是每個頁面加載時都會執(zhí)行。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號