网站性能优化之CSS无图片技术:三角形

时间:2023-03-08 21:40:32

1、使用CSS无图片技术,可以总结得到以下三个优点:

减少请求资源的大小;

减少http的请求个数;

提高可维护性。

一、CSS无图片技术,微博中有哪些实际应用呢?

网站性能优化之CSS无图片技术:三角形
网站性能优化之CSS无图片技术:三角形

通过上面的展示,我们可以看到,无图片技术,在微博上应用是十分普遍的。

二、无图片技术的实现方式:

大概有四种方式:一是通过background-color、border生成图片;二是通过字符生成图片;三是通过CSS3的gradient等生成图片(这个要考虑低级浏览器不兼容的问题);四是CSS3的自定义字体(@font-face)生成图片。

利用CSS的background-color、border属性可以生成一些图形,例如三角形。纯粹的CSS2内容,完成可以兼容IE6。

1)用background-color生成的小方块,效果如下:

网站性能优化之CSS无图片技术:三角形

CSS代码:

网站性能优化之CSS无图片技术:三角形

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

网站性能优化之CSS无图片技术:三角形

CSS代码:

网站性能优化之CSS无图片技术:三角形

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

网站性能优化之CSS无图片技术:三角形

CSS代码:

网站性能优化之CSS无图片技术:三角形

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

网站性能优化之CSS无图片技术:三角形

CSS代码:

网站性能优化之CSS无图片技术:三角形

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

网站性能优化之CSS无图片技术:三角形

网站性能优化之CSS无图片技术:三角形

HTML结构:

网站性能优化之CSS无图片技术:三角形

CSS代码:

网站性能优化之CSS无图片技术:三角形

网站性能优化之CSS无图片技术:三角形

通过以上五种图形,可以得到以下图形,效果图如下:

网站性能优化之CSS无图片技术:三角形

二、通过字符生成图片,例如尖角,圆点以及箭头,这也是CSS2范畴,完全可以兼容IE6,这个在博中使用广泛,这里不单独写demo了。

1)圆点(alt+41457),效果图如下

网站性能优化之CSS无图片技术:三角形

HTML结构:

网站性能优化之CSS无图片技术:三角形

CSS样式:

网站性能优化之CSS无图片技术:三角形