day20-21浅谈CSS Sprite_综合

什么是css sprite？

将图标、背景、按钮背景等图片合并成一张图，然后通过坐标来定位背景。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
简而言之：一背景图图多用。
具体看这个：https://blog.csdn.net/u011349149/article/details/24181675

可以用sprite实现圆角

但我不想这么做，太麻烦了，用css3新增的属性radius多方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.roundedBox {
    position: relative;padding: 17px;margin: 10px 0;}.corner {
    position: absolute;width: 17px;height: 17px;}.topLeft {
    top: 0;left: 0;background-position: -1px -1px;}.topRight {
    top: 0;right: 0;background-position: -19px -1px;}.bottomLeft {
    bottom: 0;left: 0;background-position: -1px -19px;}.bottomRight {
    bottom: 0;right: 0;background-position: -19px -19px;}#type1 {
    background-color: #ccdede;}#type1 .corner {
    background-image: url(../image/corners.gif);}</style></head><body><div class="roundedBox" id="type1"><strong>My content in roundedBox Type 1</strong><div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div></div></body>
</html>

#是id选择器的前缀，很久没用过。
悄悄说一句：上面这种方法，就是在拼圆角，好麻烦，用css3新增的属性radius多方便。

CSS Sprites:实用技术还是生厌之物？

其作为一个CSS解决方法被讨论早在2003年7月，提出者Petr Stanícek。（17年前的技术哦）
可以尽量减少HTTP请求

具体：
https://www.zhangxinxu.com/wordpress/2010/03/%E7%BF%BB%E8%AF%91-css-sprites%E5%AE%9E%E7%94%A8%E6%8A%80%E6%9C%AF%E8%BF%98%E6%98%AF%E7%94%9F%E5%8E%8C%E4%B9%8B%E7%89%A9%EF%BC%9F/

这个技术可能已经没必要了。