css无图片技术

定义:

在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。

无图片技术有什么好处:

如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度;其次,我们知道每一个CSS image都需要一个http请求去加载,浏览器每次发出的请求个数是有限的,减少CSS image的个数,显然减少了http请求数,也就提高页面的呈现速度;

无图片技术的实现方式
大概有四种方式:一是通过background-color、border生成图片;二是通过字符生成图片;三是通过CSS3 的gradient等生成图片(这个要考虑低级浏览器不兼容的问题);四是CSS3的自定义字体(@font-face)生成图片。
利用CSS的background-color、border属性可以生成一些图形,例如三角。纯粹的CSS2的内容,完全可以兼容IE6。
1)用background-color生成的小方块,效果如下:

CSS代码:

2)用border生成的小方块,效果如下:

CSS代码:

3)用border生成的小三角,效果如下:

CSS代码:

4)用border生成的尖三角,效果如下:

CSS代码:

5)用border生成的斜三角,效果如下:

HTML结构:

CSS代码:

通过以上5种图形,可以得到以下图形,效果图如下。

这里只贴一下中间图形的代码,其他的,要兴趣的同学可以自己去研究,更多有意思的图形等着你去完成。
HTML结构:

CSS代码: