在Web开发中,通过css代码也可以实现一些简单的图片,当然,如果你有耐心,也可以实现较为复杂的图片噢。
那么请问为什么有图片不去用而需要用CSS来实现呢?一是因为性能的原因,图片带给服务器和客户端的压力比几行CSS代码要大得多;二是因为没有必要,有些简单的效果利用CSS就可以直接完成了,为什么还需要麻烦地引入图片呢?
比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效果如下:
其实现代码如下:
- dropdown
可以看到,三角形实现的原理其实就是利用了border-left,border-right以及border-top。通过将左右边框设为透明状,来显示三角形的边界区域。
代码位置:http://runjs.cn/code/o3miehqr
下面再来看看一个有趣的运用,很多网站中,当图片未加载出来时,都有一个替代的图片来顶替,如下:其实这个图片是通过CSS代码来实现的。代码如下:
代码位置:http://runjs.cn/code/zj0bbjpw
其原理就是构建三角形和圆形。利用了border和border-radius。所以说CSS实现图片在应用中还是挺广泛的。