css3构建漂亮的搜索表单

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

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



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

css3中的圆角：

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

.circle {

    width: 100px;

    height: 100px;

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

}

css3中的阴影：

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

}

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

完整demo：

演示：http://www.webdesignerwall.com/demo/css3-search-form.html

表单的html代码：

<form class="searchform">

    <input class="searchfield" type="text" value="Search..." onfocus="if
(this.value == 'Search...') {this.value = '';}" onblur="if
(this.value == '') {this.value = 'Search...';}" />

    <input class="searchbutton" type="button" value="Go" />

</form>

css代码：

.searchform {

    display: inline-block;

    zoom: 1; /* ie7 hack for display:inline-block */

    *display: inline;

    border: solid 1px #d2d2d2;

    padding: 3px 5px;

   

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    border-radius: 2em;

 

    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

    box-shadow: 0 1px 0px rgba(0,0,0,.1);

 

    background: #f1f1f1;

    background: -webkit-gradient(linear, left top, left bottom,
from(#fff), to(#ededed));

    background: -moz-linear-gradient(top,  #fff,  #ededed);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/* ie7*/

    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/* ie8 */

}

.searchform input {

    font: normal 12px/100% Arial,
Helvetica, sans-serif;

}

.searchform .searchfield {

    background: #fff;

    padding: 6px 6px 6px 8px;

    width: 202px;

    border: solid 1px #bcbbbb;

    outline: none;

 

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    border-radius: 2em;

 

    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

    color: #fff;

    border: solid 1px #494949;

    font-size: 11px;

    height: 27px;

    width: 27px;

    text-shadow: 0 1px 1px rgba(0,0,0,.6);

 

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    border-radius: 2em;

 

    background: #5f5f5f;

    background: -webkit-gradient(linear, left top, left bottom,
from(#9e9e9e), to(#454545));

    background: -moz-linear-gradient(top,  #9e9e9e,  #454545);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545');
/* ie7*/

    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545');
/* ie8 */

}

这里有个不常用但其实很实用的属性，也推荐大家多了解下：display: inline-block;

关于inline-block的知识，推荐大家看以下二篇文章：
display:inline-block的深入理解
display:inline-block的应用两例