css3构建漂亮的搜索表单

现在html5和css3发展如火如荼，RIA之家将会多出些相关教程。

今天发个开山贴，原文：http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/

这个教程很简单，主要是利用了css3中二个应用最为广泛的知识点：圆角和阴影。

css3中的圆角：

在css3中只要把圆角的弧度制设置成100px，宽度和高度也为100px,你就可以创建一个半径为100px的圆形，比如：

1. .circle {
2.     width: 100px;
3.     height: 100px;
4.     -moz-border-radius: 100px;
5.     -webkit-border-radius: 100px;
6. }

css3中的阴影：

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

只有Chrome 4 和 Firefox 3.5及其以上版本才支持。

完整demo：

演示：http://www.webdesignerwall.com/demo/css3-search-form.html
表单的html代码：

1. <form class="searchform">
2.     <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
3.     <input class="searchbutton" type="button" value="Go" />
4. </form>

css代码：

1. .searchform {
2.     display: inline-block;
3.     zoom: 1; /* ie7 hack for display:inline-block */
4.     *display: inline;
5.     border: solid 1px #d2d2d2;
6.     padding: 3px 5px;
7.    
8.     -webkit-border-radius: 2em;
9.     -moz-border-radius: 2em;
10.     border-radius: 2em;
11.  
12.     -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
13.     -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
14.     box-shadow: 0 1px 0px rgba(0,0,0,.1);
15.  
16.     background: #f1f1f1;
17.     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
18.     background: -moz-linear-gradient(top,  #fff,  #ededed);
19.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7*/
20.     -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
21. }
22. .searchform input {
23.     font: normal 12px/100% Arial, Helvetica, sans-serif;
24. }
25. .searchform .searchfield {
26.     background: #fff;
27.     padding: 6px 6px 6px 8px;
28.     width: 202px;
29.     border: solid 1px #bcbbbb;
30.     outline: none;
31.  
32.     -webkit-border-radius: 2em;
33.     -moz-border-radius: 2em;
34.     border-radius: 2em;
35.  
36.     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
37.     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
38.     box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
39. }
40. .searchform .searchbutton {
41.     color: #fff;
42.     border: solid 1px #494949;
43.     font-size: 11px;
44.     height: 27px;
45.     width: 27px;
46.     text-shadow: 0 1px 1px rgba(0,0,0,.6);
47.  
48.     -webkit-border-radius: 2em;
49.     -moz-border-radius: 2em;
50.     border-radius: 2em;
51.  
52.     background: #5f5f5f;
53.     background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
54.     background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
55.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7*/
56.     -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
57. }

这里有个不常用但其实很实用的属性，也推荐大家多了解下：display: inline-block;
关于inline-block的知识，推荐大家看以下二篇文章：

1. display:inline-block的深入理解
2. display:inline-block的应用两例