1、使用CSS无图片技术,可以总结得到以下三个优点:
减少请求资源的大小;
减少http的请求个数;
提高可维护性。
一、CSS无图片技术,微博中有哪些实际应用呢?
通过上面的展示,我们可以看到,无图片技术,在微博上应用是十分普遍的。
二、无图片技术的实现方式:
大概有四种方式:一是通过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代码:
通过以上五种图形,可以得到以下图形,效果图如下:
二、通过字符生成图片,例如尖角,圆点以及箭头,这也是CSS2范畴,完全可以兼容IE6,这个在博中使用广泛,这里不单独写demo了。
1)圆点(alt+41457),效果图如下
HTML结构:
CSS样式: