CSS3新增的基础功能
在CSS3中新增了很多功能，不过比较常用的还是一些特效，如圆角、阴影、渐变、倒影、透明。在这里给出一个整合这几个特效的简单示例，还有动画和移动的本人觉得还不大常用暂不给出。
代码如下：
注：阴影的特效里，参数可选：above,below,left,right，其他的一看例子便懂
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>圆角-阴影-渐变</title> 7 <style type="text/css"> 8 div{text-align:center; width:300px; font-size:32px; color:white; padding:10px; margin:10px; -webkit-border-radius:15px; -moz-border-radius:15px;} 9 .box1{background:orange; } 10 .box2{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#999)); background:-moz-linear-gradient(top,red,blue);} 11 .box3{background-color:blue; -webkit-box-shadow:3px 3px 5px #000; -moz-box-shadow:3px 3px 5px #000;} 12 .box4{font-size:22px; color:red; -webkit-box-reflect:below -18px; background:-webkit-gradient(linear,left top,left bottom,from(blue),to(rgba(255,255,0,0.7)));} 13 </style> 14 </head> 15 <body> 16 <div class="box1">纯圆角</div> 17 <div class="box2">圆角+渐变2</div> 18 <div class="box3">圆角+阴影</div> 19 <div class="box4">圆角+倒影+渐变（透明）</div> 20 </body> 21 </html>
