上QQ阅读APP看书，第一时间看更新
2.4 范例——创建一个HTML 5版的APP注册页面
本例是一个常见的用户注册页面，表单由3个文本框组成，类型分别为email、text和password。进入页面后，鼠标会自动聚焦到“电子邮箱”文本框，同时文本框的边框会产生红色渐变的效果。点击“昵称”文本框，“电子邮件”文本框的边框红色消失，此时“昵称”文本框的边框出现红色渐变效果，“密码”文本框的效果相同。
使用支持HTML 5表单新特性的浏览器Google Chrome打开网页文件，运行效果如图2.11所示。打开网页的同时，“电子邮箱”文本框会渐变为红色，运行效果如图2.12所示。点击“注册”按钮，进行表单验证，运行效果如图2.13所示。
图2.11 HTML 5版的注册页面
图2.12 “电子邮件”文本框的边框变红
本例中采用了大量的CSS 3特效，包括刚进入页面聚焦渐变的动画、表单背景色的颜色渐变、文本框的阴影等。通过本示例可以了解如何运用CSS 3制作一个简单的注册页面。
图2.13 点击“注册”按钮
2.4.1 代码设计
利用编辑器编辑如下代码，并保存为“2-3．创建一个HTML 5版的注册页面．html”文件。
【代码2-3】
01 <! doctype html>
02 <html>
03 <head>
04 <style>
05 *:focus{ outline: none; } /* 所有元素焦点样式 */
06 body { text-align: center; }
07 form /* 表单样式 */
08 {
09 height: 240px;
10 width: 400px;
11 margin: -200px 0 0-240px;
12 padding: 30px;
13 position: absolute;
14 top: 50%;
15 left: 50%;
16 z-index: 0;
17 background-color: #eee;
18
19 /* gradient带webkit前缀被Safari 4+, Chrome支持 */
20 background-image: -webkit-gradient(linear, left top, left
bottom, from(#fff), to(#eee));
21 /* linear-gradient带webkit前缀被Chrome 10+, Safari 5.1+, iOS
5+ 支持 */
22 background-image: -webkit-linear-gradient(top, #fff, #eee);
23 /* linear-gradient带moz前缀被Firefox 3.6-15 支持 */
24 background-image: -moz-linear-gradient(top, #fff, #eee);
25 /* linear-gradient带ms前缀被IE9+ 支持 */
26 background-image: -ms-linear-gradient(top, #fff, #eee);
27 /* linear-gradient带o前缀被Opera 10.5-12.00 支持 */
28 background-image: -o-linear-gradient(top, #fff, #eee);
29 /* 标准格式linear-gradient被Opera 10.5, IE9+, Safari 5, Chrome,
30 Firefox 4+, iOS 4, Android 2.1+ 支持 */
31 background-image: linear-gradient(top, #fff, #eee);
32 /* border-radius带moz前缀被Firefox 3.5+ 支持 */
33 -moz-border-radius: 3px;
34 /* border-radius带webkit前缀被Safari 3-4, iOS 1-3.2, Android
≤1.6 支持*/
35 -webkit-border-radius: 3px;
36 /* 标准格式border-radius被Opera 10.5, IE9+, Safari 5, Chrome,
37 Firefox 4+, iOS 4, Android 2.1+支持 */
38 border-radius: 3px;
39
40 /* box-shadow带webkit前缀被Safari 3-4, iOS 4.0.2-4.2,
Android 2.3+ 支持 */
41 -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px
42 rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
43 /* box-shadow带moz前缀被Firefox 4+ 支持 */
44 -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0,
45 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
46 /* 标准格式box-shadow被Opera 10.5, IE9+, Firefox 4+, Chrome 6+,
iOS 5 支持*/
47 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0,
48 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
49 }
50 form:before /* before伪元素表示在一个元素的内容之前插入content属性定义的
内容与样式*/
51 {
52 content: ''; /* content属性与：befor及：after伪元素配合使用，生成某个
53 CSS选择器之前或之后的内容 */
54 position: absolute;
55 z-index: -1;
56 border: 1px dashed #ccc;
57 top: 5px;
58 bottom: 5px;
59 left: 5px;
60 right: 5px;
61
62 -moz-box-shadow: 0 0 0 1px #fff; /* Firefox 4+ */
63 -webkit-box-shadow: 0 0 0 1px #fff; /* Safari 3-4, iOS 4.0.2
4.2, Android 2.3+ */
64 box-shadow: 0 0 0 1px #fff; /* Opera 10.5, IE9+, Firefox
4+, Chrome 6+, iOS 5 */
65 }
66 input /* 所有文本框样式 */
67 {
68 float: left;
69 padding: 15px 15px 15px 45px;
70 margin: 0 0 10px 0;
71 width: 353px;
72 border: 1px solid #CCC;
73 background: #F1F1F1;
74 font-size: 14px;
75 -webkit-border-radius: 5px;
76 -moz-border-radius: 5px;
77 border-radius: 5px;
78
79 -moz-border-radius: 5px; /* Firefox 3.5+ */
80 -webkit-border-radius: 5px; /* Safari 3-4, iOS 1-3.2, Android
≤1.6 */
81 border-radius: 5px; /* Opera 10.5, IE9+, Safari 5, Chrome,
Firefox 4+, iOS 4, Android 2.1+ */
82 -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; /* inset
表示盒内阴影；Firefox 4+ */
83 -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 white; /*
Safari 3-4, iOS 4.0.2-4.2, Android
84 2.3+ */
85 box-shadow: 0 1px 1px #CCC inset, 0 1px 0 white; /* Opera
10.5, IE9+, Firefox 4+,
86 Chrome 6+, iOS 5 */
87
88 /* ease(逐渐慢下来); linear(匀速); ease-in(由慢到快); ease-out(由快到
慢); ease-in-out(先慢到快再到
89 慢) */
90 -webkit-transition: all 0.5s ease-in-out; /* Safari 3.2+,
Chrome */
91 -moz-transition: all 0.5s ease-in-out; /* Firefox 4-15 */
92 -o-transition: all 0.5s ease-in-out; /* Opera 10.5-12.00 */
93 transition: all 0.5s ease-in-out; /* Firefox 16+, Opera
12.50+ */
94 }
95 input:focus /* 所有文本框焦点样式 */
96 {
97 background-color: #fff;
98 border-color: #e8c291;
99 outline: none;
100 -moz-box-shadow: 0 0 0 1px #e8c291 inset;
101 -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
102 box-shadow: 0 0 0 1px #e8c291 inset;
103 }
104 input:hover /* 所有文本框鼠标悬停样式 */
105 {
106 border-color: inherit ! important;
107 background-color: #EfEfEf;
108 -webkit-border-radius: 5px 0 0 5px;
109 -moz-border-radius: 5px 0 0 5px;
110 border-radius: 5px 0 0 5px;
111 }
112 input:not(:focus) { opacity: 0.6; } /* 所有文本框非焦点样式 */
113 input:valid { opacity: 0.8; } /* 所有文本框输入有效样式 */
114 input:focus:invalid /* 所有文本框焦点但输入无效样式 */
115 {
116 border: 1px solid red;
117 background-color: #FFEFF0;
118 }
119 section { width: 400px; margin: 0 auto; } /* 章节样式 */
120 .clearfix { clear: both; } /* 清除浮动样式 */
121 #submit:hover, /* 提交按钮鼠标悬停和焦点样式 */
122 #submit:focus
123 {
124 background-color: #FDDB6F;
125
126 /* 可以参考form样式中的gradient注释 */
127 background-image: -webkit-gradient(linear, left top, left
bottom, from(#FFB94B), to(#FDDB6F));
128 background-image: -webkit-linear-gradient(top, #FFB94B,
#FDDB6F);
129 background-image: -moz-linear-gradient(top, #FFB94B, #FDDB6F);
130 background-image: -ms-linear-gradient(top, #FFB94B, #FDDB6F);
131 background-image: -o-linear-gradient(top, #FFB94B, #FDDB6F);
132 background-image: linear-gradient(top, #FFB94B, #FDDB6F);
133 }
134 #submit /* 提交按钮样式 */
135 {
136 background-color: #FFB94B;
137 border-width: 1px;
138 border-style: solid;
139 border-color: #D69E31 #E3A037 #D5982D #E3A037;
140 float: left;
141 height: 35px;
142 padding: 0;
143 width: 120px;
144 cursor: pointer;
145 font: bold 15px Arial, Helvetica;
146 color: #8F5A0A;
147 margin: 20px 0 0 0;
148
149 /* 可以参考form样式中的gradient注释 */
150 background-image: -webkit-gradient(linear, left top, left
bottom, from(#FDDB6F), to(#FFB94B));
151 background-image: -webkit-linear-gradient(top, #FDDB6F,
#FFB94B);
152 background-image: -moz-linear-gradient(top, #FDDB6F, #FFB94B);
153 background-image: -ms-linear-gradient(top, #FDDB6F, #FFB94B);
154 background-image: -o-linear-gradient(top, #FDDB6F, #FFB94B);
155 background-image: linear-gradient(top, #FDDB6F, #FFB94B);
156
157 /* 可以参考form样式中的border-radius注释 */
158 -moz-border-radius: 3px;
159 -webkit-border-radius: 3px;
160 border-radius: 3px;
161
162 /* 给文字加上阴影，早在CSS 2中已经出现 */
163 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
164
165 /* 可以参考form样式中的box-shadow注释 */
166 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255,
255, 255, 0.3) inset;
167 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
rgba(255, 255, 255, 0.3) inset;
168 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255,
255, 0.3) inset;
169 }
170 .item-name { background: url(../images/user.png) 10px 11px no
repeat; } /* 昵称背景样式 */
171 .item-email { background: url(../images/email.png) 10px 11px no
repeat; } /* 密码背景样式 */
172 .item-password { background: url(../images/keys.png) 10px 11px no
repeat; } /* 电子邮箱背景样式 */
173 </style>
174 <script src="../js/jquery-1.8.3.js"></script>
175 <script src="../js/modernizr.custom.2.6.2.js"></script>
176 </head>
177 <body>
178 <header><h2>搞定输入框自动聚焦</h2></header>
179 <section>
180 <form action="" method="post">
181 <div class="clearfix">
182 <! -- 第1个autofocus -->
183 <input type="email" tabindex="1" id="email" class="item
email" placeholder="电子邮箱" autofocus required/>
184 </div>
185 <div class="clearfix">
186 <! -- 第2个autofocus -->
187 <input type="text" tabindex="2" id="name" class="item-name"
placeholder="昵称" autofocus
188 required/>
189 </div>
190 <div class="clearfix">
191 <! -- 第3个autofocus -->
192 <input type="password" tabindex="3" id="password"
class="item-password" placeholder="密
193 码" autofocus autocomplete="off" required/>
194 </div>
195 <div class="clearfix"><input type="submit" tabindex="4"
id="submit" value="注 册" /></div>
196 </form>
197 </section>
198 </body>
199 </html>
提示
代码中可以看到很多样式前带有-webkit、-moz、-o、-ms的前缀，注释中给出了浏览器的支持情况。想更多地了解各浏览器前缀，可以参考网址http://css3please.com。
2.4.2 代码分析
本示例侧重从CSS 3出发，介绍如何构建一个注册页面，下面讲解其中用到的CSS 3技巧。
【代码2-3】中第19～31行、126～132行、149～155行使用了CSS 3 Gradient（渐变）。渐变分为线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。这里使用了线性渐变，WebKit内核的浏览器语法如下。
-webkit-gradient(<type>, [<point> || <angle>, ]? <stop>, <stop> [, <stop>]* )
在WebKit下Gradient使用的语法如图2.14所示。
图2.14 WebKit下Gradient使用
第1个参数表示渐变类型，渐变类型分为linear（线性渐变）和radial（径向渐变）两种。第2个和第3个参数分别表示渐变的起点和终点，可以用坐标形式或方位值，比如right top（右上角）和right bottom（右下角），也可以使用角度，比如red 10%。第4个和第5个参数表示起始和终止的渐变颜色。
再看标准浏览器的Gradient语法：
linear-gradient([point || angle, ]? stop, stop [, stop]*)
标准浏览器下Gradient的使用如图2.15所示。
图2.15 标准浏览器下Gradient的使用
标准浏览器下Gradient的渐变类型不在第1个参数上，而是写在样式名称上。第1个参数表示渐变的起点，可以使用方位值或者角度值，第2个和第3个参数和WebKit相同。
提示
想了解更多Gradient的使用，可以参考网址http://css-tricks.com/examples/CSS 3Gradient/。
代码32～38行、79～81行、108～110行、158～160行使用了CSS 3的border-radius，中文意思是“圆角”，语法如下：
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
其中，length是由浮点数字和单位标识符组成的长度值，可以使用em、ex、pt、px、百分比等，不可为负值。圆角还有其他一些相关属性，比如border-top-right-radius、border-bottom-rightradius、border-bottom-left-radius、border-top-left-radius。
代码40～47行、62～64行、82～85行、100～102行、165～168行使用了CSS 3的boxshadow，语法如下：
box-shadow :<length> <length> <length> <length> || <color>
参数说明：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色。
例子中使用的盒阴影效果属于盒外阴影，除此之外还有盒内阴影，使用时可增加一个inset，代码如下：
box-shadow :inset 10px 10px 5px #000000;
如果还想了解更多的盒阴影，可以去http://www.css3maker.com/box-shadow.html动态感受下box-shadow的强大效果。