精通CSS——chapter4（背景图像效果）

4.1背景图像基础

如果使用像素设置背景元素，那么我们是按照这个图像的左上角距离边框的上边框与左边框那样计算，但是如果我们用百分比的话，百分数定位并不对背景图的座上角进行定位，而是使用图像上的一个对应点。因此距离会有一些差距，如果把百分比设置为50%，那么图像将会垂直居中。

4.2圆角框

其实这种用图片代替圆角的早就应该淘汰啦，我试过了一下图片上的源码，但是当我增加文字的时候，整个背景并没有变大，所以我也不知道是怎么一回事，所以这一part就算了，反正这个方法比较落后了
。

其实我一直想说如果我们想实现圆角框的话，我们就需要用border-radius

.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

用这样依靠浏览器来描绘圆角，但是这是一个新属性，不一定所有的浏览器都能够兼容，所以我们要使用于浏览器相关的扩展调用它。我们知道Mozilla使用-moz前缀，Safari使用-webkit前缀。通过使用这种机制，可以在新的CSS3特性成为正式规范之前试用他们。

还有另外一种也是很几把好用，那就是border-image。这是允许指定一个图像作为元素的边框，他把这张图片分成九个部分，boder-image属性自动把图像的每个部分用于对应的边框，因此，图像的左上部分用作左上边框，右边中间部分用作右边的边框。如果我希望边框的宽度是25px，所以在css中设置这个宽度，如果图像不够大，他会自动地平铺，产生一个可扩展的框。
.box {
-webkit-border-image: url(img/corners.gif)
25% 25% 25% 25% / 25px round round;
}

4.3投影

.box {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}
这里第一个参数是右边的阴影，越大，这个投影的偏离就越大
第二个参数是下面的阴影，越大，这个投影的偏离就越大
第三个参数是散影，这个是围绕着整个元素的
第四个是颜色
实际上散影后面还能添加一个参数，这个参数是扩大散影，还能使散影变得没有那么散，开始变得实在一点。

还有一种是笨方法，那就是首先需要将投影图像应用于容器div的背景，因为div是块级元素，所以我们只需要把这个图片调整一下

.img-wrapper img {
/*background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;*/
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}

用负方向的margin就行了，但是记得要加position：relative。

4.4不透明度

.alert{
background-color:#000;
border-radius: 2em;
opacity: 0.8;
filter: alpha(opactiy=80);
}

我们通常这样用来表现不透明度，其实在自己的项目实践当中已经非常常见了。

然后我们经常应用到的RGBa隆重登场。
RGB分别代表红色、绿色和蓝色，a代表的是alpha透明度，RGBa（0,0,0,0.8）三个0等于是黑色

接下来介绍一下CSS视差效果