CSS在很多程序员看来那只不过是雕虫小技，
实际上CSS3发展到今天已经强大到超乎你的想象，
当然对于低端浏览器使用者来说，还是以前那样——囧
有时候搞CSS开发确实需要很多想象力，下面一组纯CSS3特效足以描述这一点
以下内容转载自【http://design.yesky.com/show/466/11497966_3.shtml】
设计欣赏：纯CSS3「绘制」的图形图标
IE 标志
作者: Andreas Jacob
在 Firefox 3.6+ 以及Safari 5 上显示最佳。使用了圆角，渐变，阴影等属性。
任天堂游戏图标
作者: Drew
使用纯 CSS 实现的一些任天堂公司的游戏图标。
电影《回到未来》片名
作者: Lucas Garron
和原版惊人相似，在 Webkit 引擎的浏览器中显示最佳。
CSS 雨滴
作者: Sean Martell
右边是原始图片，左边是 CSS 生成的效果
Bahamas CSS 标志
作者: ForestMist
巴哈马群岛标志，右边是原始图，左边是 CSS 效果。
Reddit 网站的外星人标志
作者: Matthew James Taylor
使用 “O O _ ( ) ( ) O O O O / – o O O O O O O O O ? ? ( ) ( )” 几个字母以及文字效果。
纯 CSS 社会媒体网络标志
作者: insicdesigns
又一套 CSS3 社会网络媒体标志。
CSS3 实现的 iPhone 图片
作者: Jeff Batterton
简直疯了。
Twitter 图片
作者: Jeff Batterton
相当精彩的 CSS 图形效果。参见《纯CSS3实现的 Twiiter 图画》
美剧《迷失》片名动画
作者: Marcos Esperon
在 Webkit 引擎的浏览器中显示最佳。
奥林匹克标志
作者: Doug Neiner
基于纯 CSS，以 em 为单位，可动态调整尺寸，需要浏览器支持 border-radius 属性，目前支持的浏览器包括Chrome,Safari, Firefox 和IE9。
jQuery 标志
作者: Doug Neiner
这是大家最钟爱的 JavaScript 框架 jQuery 的标志，使用 CSS3 的 border-radius 属性。
jQuery UI 标志
作者: Doug Neiner
这是 jQuery UI 库的标志，同样，基于 CSS3 的 border-radius 属性。
CCS 标志一宗
作者: Justin Sepulveda
全部基于纯 CSS3 的 border-radius, gradient, transform 属性。
Opera 标志
作者: David DeSandro
做得非常漂亮，大量使用了 border-radius, gradient 属性，不过在不同浏览器显示不太一致，尤其在 IE 中。
iOS icons
作者: Louis Harboe
非常伟大的作品，使用了 CSS3 的高级功能。
作者: Zander Martineau
这份作品可以教你如何使用 CSS 实现三角形，如何实现诸如 RSS 图标，心形图，三角形一类的简单图形。
基于纯 CSS 的超级玛丽 3D 动画图标
作者: Andreas Jacob
基于 CSS3 和 CSS 4D 框架 ，动画部分很精彩，但目前只支持Safari 5。
纯 CSS 图标一宗
作者: Andrew Kelly
使用了 CSS3 的渐变，阴影，圆角等属性，效果很出众。
CSS3 实现的 Photoshop 标志
作者: Radu Chelariu
完全基于 CSS3，没借助任何图形。
10 个令人赞叹的 CSS 社会媒体网络标志
作者: Nicolas Gallagher
全部基于简单的，语义化 HTML 标签，没有任何空的，多余的对象，没有 JavaScript，没有图片。
一套 CSS 图标
作者: Lucian Marin
一套基于 CSS 的图标，非常精致。
基于纯 CSS3 的 Twitter 图标
作者: Giacomo Bartoli
很显示，使用了 @font-face 和少量阴影及圆角。
加拿大 Go Transit 公司标志
作者: Collin Henderson
基于 CSS3 的 border-radius 属性
以上文章转载自【http://design.yesky.com/show/466/11497966_3.shtml】
当然作为一个前端开发工程师，这种变态的作图方式在实际项目中并没有太多的实际作用，
1、PC项目中，利用css spirte技术处理的图片对宽带普及的今天来说，其实不算什么，有时候话大力气的CSS3制作图像还不如平一个图标来的高效，而且CSS3对IE9支持只有不到80%，IE8/IE7/6支持基本为0
2、手机项目中，虽然流量显得那么的珍贵，但是手机的CPU性能还不够强大，尤其是五花八门的安卓手机，即便是CPU跑分性能够强还有CSS3渲染性能不够的情况
因此这些图片在当前网络时代里还是只能起到小小的「炫富」作用——囧
作为一个前端工程师，CSS是最基本的入门课，你都能做出来吗？,布布扣,bubuko.com