CSS3实战学习-创建漂亮的表单(3) 纯CSS背景渐变
本站原创编译，转载请给面子，尊重劳动果实，欢迎交流指正。
几乎做了有始无终的表率，想起了小盆友们熟悉的白头翁的故事；其实白头翁也够冤枉的；凭什么整天拿一堆无辜的小动物说事呢我就不明白了。正事是3月开始弄的小连载“CSS3实战学习-创建漂亮的表单”在做了基础样式和阴影之后就再没碰过了；今天争取结束掉吧，只剩下背景渐变的实现这么一部分了。
首先我们回顾一下当时的目标范例，简洁雅致的小表单一个。
另外也可以先围观下mozilla.org的这篇css gradients in Firefox 3.6，从单向渐变到形变彩虹渐变...看看CSS3为我们带来了多少好东东=)
不过我们要做的没这么复杂，单向渐变就OK；下面两行代码词法分别用于Webkit和Gecko内核：
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )
-moz-linear-gradient(<start> <angle>, <color>, <color>)
稍作解释：
- Webkit：渐变需要起点<start>(X、Y)和终点<end>(X、Y)，需要起点色<from>和终点色<to>
- Gecko：渐变需要起点<start>(Y)和至少两个颜色<color>，<angle>用来控制角度，如果我们要做的是从上到下垂直的渐变，那么不需要指定<angle>
那么实际的代码大致是这样的：
background: -webkit-gradient(linear, left top, left bottombottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);
搞出的飞机就会是下面这个样子：
为了效果明显一些，我们暂且使用纯粹的从黑到白的渐变来演示，在最后会统一更新为设计需求中的颜色。
基础的方法有了，我们可以一点点把样式打造成需求的样式。首先我们要限定渐变的高度，这样无论是普通的文字input还是textarea都会有相同高度的渐变背景，而不是一变到底，如下图这种错误的样式：
我们将之前的两行代码稍作修改，将渐变高度限制为25像素，并对input和textarea使用这些样式代码：
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
}
现在表单的背景样式大致如下面截图所示，不错：
我们还有一件事情需要做，看下范例页面会发现，元素边框和背景之间还需要1像素的留白；精细的质感全靠这1像素的留白来体现...好，将样式代码稍做修改：
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
}
怎么回事呢？我们说一下。第一行，我们为Webkit的样式设置了一个color-stop，位置在4%的地方，颜色为黑色，并将起始色修改为白色；限高25像素的4%就是1像素，这样做就可以在真正的渐变开始之前插入1像素的白色作为背景色，然后再开始从黑色向白色进行24像素的渐变，实现我们的需求。
对于Gecko内核则简单了许多，最初起始色为白色，1像素的位置开始为黑色，25像素的位置设置为白色作为终点。
最后我们将所有的“#000000”修改为设计需求中的“#EEEEEE”，得到如下样式：
另外还有两件事需要做。首先呢，当输入框处于悬停或聚焦状态时，周围的阴影稍稍变暗：
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
最后将“Send”按钮搞成圆角：
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
终于搞定，最终效果如下(Chrome、Firefox、Safari)：
对于不支持或不能完美支持CSS3的浏览器，比如IE等，可以使用传统的背景图片方式来实现渐变背景，不在本文讨论范围喽。
译者：Viiiix7210
原文参考：Design a Prettier Web Form with CSS 3
| < Prev | Next > |
|---|
