第四章 背景图像效果

前言

本章主要讲到了最新的各种css3属性和对应老版本的兼容方法。

圆角框

圆角框有多种实现的方法。首先我们来说说最简单的，也就是直接使用css3的属性border-radius。如果设置为50%则变为圆形。

div {
  width:200px;
  height:200px;
  background-color:red;
  border-radius:50px;
}

demo

但是如果为了兼容低版本的浏览器，就不能够使用css3的属性了。我们应该如何是好呢？

那就需要用到透明图片了。通过在四个角落设置四个不同的透明半圆图片，来完成圆角框的效果。可以看看我的个人站点，主页右上角和左下角的三角就是利用了这个原理，圆角也是一个道理。

    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: url("../images/shape-1.png") no-repeat;

当然，也有一些其他的解决方案，比如说IE下可以使用VML矢量可标记语言作为画笔绘出圆角。通过使用htc文件来兼容IE6。

但是作为开发者，如果我们一直推崇兼容老版本，是不能推动新版本的普及的，所以我个人对于兼容老版本IE是反感的。

投影

和前面一样，我们还是先从简单的方法开始讲起，首先是css3提出的box-shadow属性，该属性在各大网站中都有使用。

div {
  width:200px;
  height:200px;
  background-color:red;
  box-shadow:10px 5px 5px black;
}

demo

同样的，使用css3会带来一定的兼容性问题，而且box-shadow会影响性能。如果我们需要取代该属性而实现投影，就需要在photoshop中来实现阴影图片，从而模拟投影效果。

也通过可以IE的滤镜来兼容：

.box-shadow{ 
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/ 
 background-color: #eee; 
} 

demo

不透明度

还是从简单的说起，css3提供了属性opacity来完成不透明度的设置：

div {
  width:200px;
  height:200px;
  background-color:red;
  opacity:0.7;
}

demo

IE下可以通过滤镜来兼容：

filter:alpha(opacity=80);

熟悉css3的同学应该知道，css3在RGB的基础上又推出了一种新的颜色格式RGBA，其中的A就是透明度的设置。那么既然有了opacity，为什么又需要RGBA呢？
原因就是RGBA只针对颜色，而opacity不仅针对颜色，还针对内容，也就是说opacity是可继承的。

demo

最后推荐一款css3在线效果代码生成器，可以通过可视化效果来生成相应的代码。

感悟

其实这章还有很多内容，比如多背景图片，边框图片等等，只是我没有去一个个的尝试写demo。学习这个东西嘛，学无止境，重要的是学习的方法和思路。

主要是尝试了几个css3的属性的兼容性问题，相信随着技术的发展，这些都会成为历史遗留问题，就好像css精灵在http2的多路复用下没有必要使用一样。由于现在自己接触的项目也没有要考虑过这么仔细的兼容性问题，所以一直对兼容性问题的理解也就停留在javascript事件处理的不同属性名和各个浏览器属性前缀上。对于真正的老版本ie下的兼容还很欠缺。所以心里有点矛盾，在学校学习的时间是那样的宝贵，我究竟需不需要在先阶段花时间去考虑老版本ie兼容呢？