最近在重新学HTML和CSS，以前都是凭借自己多年的经验自行摸索，从来都没有系统的学习过一遍。这次看了PHP兄弟连做的细说PHP视频。查缺补漏，以前半瓶子逛荡的状态已一去不复返。不过兄弟连的PHP教学，只讲了CSS2和HTML4，对最新的CSS3和HTML5没有涉猎。在一次扒皮实践当中，看到豌豆荚的底部footer不错。本想拔下来，突然发现他底部的链接文字是渐变的。非常好看。于是想尽办法想给他整了出来。
链接文字颜色渐变CSS代码：
1 2 3 4 5 6 7 8 9 | a { color:#333; /* 初始颜色 */ text-decoration:none; /* 去掉链接下划线 */ -webkit-transition: color .4s ease; -moz-transition: color .4s ease; -o-transition: color .4s ease; transition: color .4s ease; } a:hover {color: red} /* 最终颜色 */ |
演示：http://jsfiddle.net/forece/6jm809sn/
其实，除了链接文字颜色渐变，用的最多的还是边框 div 颜色渐变，像一个按钮一样。
边框颜色渐变CSS代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | .box{ margin:auto; width:300px; background:#AAA; font-size:30px; color:#FFF; text-align:center; transition: background 0.5s ease; -moz-transition: background 0.5s ease; -webkit-transition: background 0.5s ease; -ms-transition: background 0.5s ease; -o-webkit-transition: background 0.5s ease;} .box:hover{ background:rgb(255,157,0);} a{ text-decoration:none; color:white; } |
演示：http://jsfiddle.net/forece/uL0aqncu/
PS一句，如果你还在用IE的话，貌似是看不到这些效果的。。