本文摘自 勾三股四 更早时期的 不老歌 博客。

CSS 3

前端开发的最爱！

技术介绍和代码实现

• 圆角 (link)
• 颜色渐变 (link)
• 多重背景 (link)
• 阴影 (link)
• 几何变换 (link)
• 渐进变换 (link)
• 动画 (link)
• 选择器扩展 {}
• :伪元素

CSS 3 的特点

优点

• 符合传统Web前端工程师的习惯
• 尊重主流的网页设计风格和技术需求
• 有强大的交互机制
• 和网页元素完美结合，不影响语义
• 适合较为系统或简约的界面需求

缺陷和其它不确定因素

• 归根结底都是矩形变换
• 没有处理复杂光影效果的能力
• 部分效果需要取巧的方式来实现
• 运行效能尚不成熟
• 兼容问题阴魂不散

实例演示

• 傲游浏览器在这方面的实践
• CSS 3 Heart
• CSS 3 Logos (傲游/新浪/腾讯/百度/机器猫)
• “2.5D”视觉效果

延伸阅读

• css3.info
• css-tricks.com

SVG

期待重生！

技术介绍和代码实现

• 实例1：一个简单的例子 (link)
• 实例2：各种简单的框线和图形 (link)
• 实例3：贝塞尔曲线 (link)
• 实例4：二次曲线 (link)
• 实例5：二次曲线之二 (link)
• 实例6：填充和描边 (link)
• 实例7：框线边缘处理 (link)
• 实例8：绘制虚线 (link)
• 实例9：CSS样式表 (link)
• 实例10：模式集成 (link)
• 实例11：元素集成 (link)

其它细节

• 元素的层次控制
• 遮罩和过滤
• 几何变换
• 文字渲染

SVG的特点

优点

• 基于矢量图和矢量变换
• 适用于相对静态的视觉内容
• 各种集成管理方式
• 全平台解决方案 (vml for IE)
• 处理不规则形状的元素
• 兼顾灵活度和前端开发的习惯

缺陷和其它不确定因素

• 标记和属性都非常琐碎，不易于学习和记忆
• 必须严格遵循 xml 文件格式，代码健壮性不够
• 无法进行像素级编辑
• 同样存在不同平台和浏览器的细节绘制差异

实例演示

• 直升机逃生
• SVG–oids
• gRapael报表

延伸阅读

• 《SVG开发实践》
• Raphael + gRaphael

总结

横向实例对比：头像编辑

• Canvas方案：傲游3设置头像
• CSS方案：傲游账户中心设置头像
• SVG方案：用Raphael实现的demo

引用说明

• 部分代码片段引用自：
• MDC: http://developer.mozilla.org/
• HTML5 Presentation: http://slides.html5rocks.com/

迎接挑战吧!

Thanks & Q-n-A