最近一直把玩 CSS3 相關(guān)的東西，也發(fā)現(xiàn)了一些新的 CSS 技巧。你知道如何使用 border-radius 創(chuàng)建圓形圖案、使用 box-shadow 創(chuàng)建內(nèi)部陰影效果嗎？帶你仔細(xì)閱讀這份使用 CSS3 的 gradient、border-radius 及 box-shadow 屬性所制作的漂亮的搜索表單案例。它能夠在支持 CSS3 的瀏覽器中完美呈現(xiàn)，對(duì)于不支持 CSS3 的瀏覽器也可以良好降級(jí)，以保持可用性。

查看演示DEMO：http://www./demo/css3-search-form.html

圓形圖形技巧

你可以通過為 border-radius 屬性指定一個(gè)非常大的值，以創(chuàng)建一個(gè)圓形圖案。下面的示例使用 100px 的邊界半徑作圓形。

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}

內(nèi)陰影效果

通過指定 box-shadow 屬性的 inset 參數(shù)來創(chuàng)建一個(gè)內(nèi)陰影效果。截至目前，此功能僅在 Chrome 4+ 和 Firefox 3.5+ 中被良好支持。

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

搜索表單示例

以下這個(gè)搜索表單演示正是使用了 CSS3 的 gradient、border-radius 和設(shè)定 inset 參數(shù)值的 box-shadow 屬性（請(qǐng)使用 Chrome 4+ 或者 Firefox 3.5+ 瀏覽該示例。它能對(duì)不支持 CSS3 的瀏覽器良好地降級(jí)。請(qǐng)查看源代碼來學(xué)習(xí) CSS 代碼的使用。