CSS3实战学习-创建漂亮的表单(2) 基本样式和阴影
前面一篇CSS3实战学习中，我们了解了这次的目标及表达代码；今天继续，来看下表单元素基本的样式设置以及CSS3阴影样式方面的应用。
基础样式设置包括表单元素的呈现、文字样式等方面，比较常规。
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
做好这一步其实已经是个中规中距的常规表单的模样了；沿袭了近年来的风格习俗。
基础样式搞定，接下来进入正题，我们将使用以小撮CSS3来实现目标范例中的阴影样式部分。用来设置阴影的代码通常是这样的形式：
box-shadow: <color> <horizontal offset> <vertical offset> <blur>;
依次为阴影色、横向偏移值、纵向偏移值和模糊值；后三者均以像素单位记。
我们要对3个text类型的文本框和1个textarea设定阴影效果，代码如下：
# input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
其中box-shadow是CSS3原生的写法；-moz-box-shadow用来兼容Mozilla的Gecko引擎，相应的浏览器有Firefox、Camino、Flock和SeaMonkey等；-webkit-box-shadow用来兼容Webkit引擎，相应的浏览器包括Chorme和Safari等。
直到CSS3成为正式普及的标准之前，这样繁琐的针对每个浏览器引擎去一一写出来至少没有坏处。IE暂不支持，无视。
另外呢，可以看到在阴影的颜色方面我们使用的是CSS3的RGBA，而不是常规的RGB代码；RGBA即红、绿、蓝以及Alpha通道，也就是颜色值与不透明度混搭。
rgba(<red>,<green>,<blue>,<opacity>);
所以前面的代码中(0,0,0,0.1)对应的就是不透明度为0.1的黑色。为什么不直接将颜色设置为浅灰色，而是使用Alpha通道呢？因为对于非白色背景来说，不包含任何背景色的纯粹的浅灰色太不真实了，而半透明效果可以避免这样的状况。
现在，我们的表单看上去应该是如下图所示的效果了；不坏。
阴影的样式搞定；接下来的CSS3实战里面，我们将学学怎样设置渐变背景样式。
译者：Viiiix7210
原文参考：Design a Prettier Web Form with CSS 3
| < Prev | Next > |
|---|
