1.语义化结构
先看一段页面代码：

class="rightcl_part toggle_box" id="help_guide_3">
class="stretch ac_toggler">我的勋章

繁多的“class”、“id”等标签令页面越来越臃肿，开发者想爆头脑取名，浏览者不易阅读，无从下手。借助Html5更语义化的结构标签，我们可以如下优化：

当然在Html5时代想完全和“class”、“id”说拜拜是不可能的，当页面需要同时出现多个“section”、“header”等时，一种方法是分别定义不同的“class”或“id”，另一方法就是借助更强大的css选择器了，这里列举几个“选择器”样例：

body nav+section {}                     定位最外层的 section 元素
section>section {}                       定位下一个 section 元素
section section article {}            定位 article 元素
 
2.自由透明度
139说客“皮肤”功能费了WD不少脑油，特别是在处理透明度方面，性能与效果弹性不大，但在Css3时代我们终于可以抛弃长长的透明滤镜，在同一个样式里分别为“背景”、“文字”、“边框”定义不同的透明度了，css样式如下：

 
.box {
 color: rgba(255,255,255,0.9);                     /*文字透明度*/
 background-color: rgba(0,0,0,0.2);            /*背景透明度*/
 border:3px solid rgba(0,0,0,0.5);                /*边框透明度*/
 height:100px;
 width:100px;
 }

但发现奇怪的一点边框的透明度会与背景的透明度相叠加，具体更好的分离透明度方法还在尝试中。
 
 
3. 尽情圆角吧
昔日当碰到应对不同宽度的圆角结构，不得不分两段或三段来处理，现在也可以通过一句样式来完成了！圆角样式： border-radius:10px; 可以直接加入上面的样式测试效果：

.box {
 color: rgba(255,255,255,0.9);                     /*文字透明度*/
 background-color: rgba(0,0,0,0.2);            /*背景透明度*/
 border:3px solid rgba(0,0,0,0.5);               /*边框透明度*/
border-radius:10px;                                    /*圆角率*/
 height:100px;
 width:100px;
 }
 
也可分别定义四个角的圆角率，样式如下：

border-top-right-radius:10px;           border-bottom-right-radius:10px;
border-bottom-left-radius:10px;       border-top-left-radius:10px;

更详细按钮、图片圆角攻略，可以参考：
 
4.“文字”、“盒子”阴影
摈弃长长滤镜样式的快感，也只有Css3时代才能感受得到，期待早日到来。
文字阴影：text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
盒子阴影：box-shadow: 0 0 10px rgb(0,0,0);
可继续加入上面的样式测试效果：
 
.box {
 color: rgba(255,255,255,0.9);                             /*文字透明度*/
 background-color: rgba(0,0,0,0.2);                    /*背景透明度*/
 border:3px solid rgba(0,0,0,0.5);                       /*边框透明度*/
border-radius:10px;                                            /*圆角率*/
text-shadow: 2px 2px 1px rgba(0,0,0,0.5);      /*文字阴影*/
box-shadow: 0 0 10px rgb(0,0,0);                    /*盒子阴影*/
 height:100px;
 width:100px;
 }

 
 
甚至看到网上有更疯狂的做法，几个阴影同时添加：

 
text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);
 
其中盒子阴影滤镜对浏览器版本要求比较高，若使用较低版本的FireFox和Chrome可使用原生样式测试效果：

 
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
 
5.同一盒子多背景图
添加多个背景图只需在原来的基础上，中间以逗号隔开即可，样式如下：
 

background-image: url(testBg1.gif) , url(testBg2.gif);
background-repeat: no-repeat;
background-position: bottom left , top right;
 

各方面的资料继续关注中，享受超明星待遇的“Html5+Css3”炒得热火朝天，但匹配适合WebUI设计师的相关资料还比较零散，网上一提到Html5首当其冲都在聊“canvas”，canvas标签主要应用于绘制图形功能， WebUI设计可能使用的机会相对不多，具体canvas资料文档可以参考：