我先解释一下各自含义：
data: ----获取数据类型名称
image/gif-----指数据类型名称
base64 -----指编码模式
AAAAA ------指编码以后的结果。
background-image: url(data:image/gifbase64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件，编码采用ASCII 字符，ASCII编码内容是‘AAAA’”
我知道你清楚没。这实际就是一种新写法。原理和以往不同。
以往的图片路径写法是：
background-img:url(../image/xxx.gif)
图片需要加载服务器指定路径下的对应gif文件。
新写法就是：
background-image: url(data:image/gifbase64,AAAA)
图片本身就已经以ASCII的形式存在了文档中，只需要浏览器进行编译就可以了。
新写法将图片写入文档中，可以减少客户端对服务器的请求。
换句话讲，原来我们要加载图片，是从服务器下载。
现在浏览器直接把那一串ASCII按照你的文件类型进行编译就可以出来结果了。
但是也会有问题
ie8貌似不兼容。
具体LZ可以再研究研究
CSS可以控制图片的大小，也可以控制背景图片的位置，但是不可以控制背景图片的大小，假如你背景图片是100*100的大小，你只要10*10的背景图，那么你就单独做一个10*10的背景图不就好了。<divclass="class">
<div
class="style">
<h1>TITLE</h1>
<ul>LIST</ul>
</div>
</div>
h1
ul
div#class
div#style各用一个角，懂？原来的内部padding在h1和ul上设置
一般的方框都是横向扩展或者纵向扩展，没必要四个，只需两个图片，即一个窄边和一个宽度/长度远大于正常需要的边就行了，两个DIV
============
我来补充605003402
一张图片是指将你的四张圆角合成一张图片，通过指定h1
ul
div#class
div#style的background-position属性调整图片的显示位置，一张图片是这样安排的
右下角图片
|
左下角图片
------------------------------
右上角图片
|
左上角图片
当然要设置background-repeat:none
另外用CSS3的话可以不用图片，border-radius可以定义方块的圆角，不过目前支持CSS3的浏览器只有IE9、FIREFOX、chrome、safari，局限性很大。目前国内依然是以IE6为主流，支持性是最差的
