CSS3实战学习-创建漂亮的表单(1) 概述
还上瘾了；继续coder人格的业务知识学习与交流。之前集中做过的两个小连载分别是HTML5+CSS3实战和他们说这叫“面向对象CSS”；今天开始的小系列主要集中看下CSS3在表单方面的应用，其实作者重点是要演示一下阴影和背景渐变的使用。
究竟搞什么飞机呢，我们首先来看下目标范例；朦朦胧胧的蛮好看哦，不过我个人觉得用表单元素演示CSS3外部阴影的效果不是很合适，感觉输入框都凸出来了，好像摆着几块瓷砖一样。
主要用到的几个CSS3样式属性是box-shadow, gradients, opaque colors和rounded corners；目前浏览器方面比较给劲的有Chrome 4.0，Firefox 3.6，Safari 4.0和刚刚发布的Opera 10.50；今天主要看下页面代码：
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>
<p class="email">
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>
<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>
<p class="text">
<textarea name="text"></textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
作者使用<p>做容器；因人而异吧，没必要求同，只要保证每个表单元素的容器有各自的class名称就OK；接下来的一篇中我们来看基础样式及阴影的设置。
译者：Viiiix7210
原文参考：Design a Prettier Web Form with CSS 3
| < Prev | Next > |
|---|
