现在html5和css3发展如火如荼,RIA之家将会多出些相关教程。
今天发个开山贴,原文:http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/
![search-form](https://i-blog.csdnimg.cn/blog_migrate/9253240239eae784e612f7f89475034d.png)
这个教程很简单,主要是利用了css3中二个应用最为广泛的知识点:圆角和阴影。
css3中的圆角:
在css3中只要把圆角的弧度制设置成100px,宽度和高度也为100px,你就可以创建一个半径为100px的圆形,比如:
- .circle {
- width: 100px;
- height: 100px;
- -moz-border-radius: 100px;
- -webkit-border-radius: 100px;
- }
![](https://i-blog.csdnimg.cn/blog_migrate/9f8f531cf5f364df9489791e30fb6b16.gif)
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及其以上版本才支持。
![](https://i-blog.csdnimg.cn/blog_migrate/64850eab930efd38ad2369a5ac988fd1.gif)
完整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的应用两例