css3新特性总结（视觉表现方面）

浏览数：16 / 时间：2015年06月09日

1.半透明rgba

在rgba出现之前，半透明可以用opacity来创建，可是这样子导致的结果是不仅元素的背景会变透明，标签元素包含的文字也会变透明。这样子会导致可读性降低，所以都会嵌套一个包装标签来创建半透明，这样子很麻烦，自从可以用rgba来表示颜色之后就方便多了。rgba表示方法为：

.rgba{
        background:rgba(255,0,0,0.5);

}

括号里面有是个数字，第一个表示红色，第二个表示绿色，第三个表示蓝色，最后一个表示不透明度。

下面分别用rgba创建半透明和opacity创建半透明（不嵌套包装元素），然后对比结果：

可以看的出来，opacity创建的半透明，文字也会变得透明。

2.多背景图background-image

以前backround-image只支持一个图片，现在可以支持多个图片，只要把它们用逗号隔开就行了，格式为：

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat];

3.背景裁剪background-clip

这个属性包括三个值。

第一种：

.test{
    background-clip:border-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

border-box的效果和默认的效果是一样的，都是从border为边界，在内部显示裁剪后的背景。有趣的是，设置border为dashed时，border左上部分的背景颜色为设置的背景颜色。如图：

第二种：

.test{
    background-clip:padding-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

padding-box以padding为边界，border将不会有背景颜色。如图：

第三种：

.test{
    background-clip:content-box;
    background-color:#0f0;
    background-image:url(path/to/image);
    border:20px dashed #f0c;
    padding:20px;
}

content-box是在内容区域表现的，如图：

background-clip属性可以和rgba属性结合使用，比如这个边框透明，内容区域不透明的盒子

它完全的代码为：

#test{
    background: green;
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px solid rgba(244,212,0,0.3);
    margin:20px;
    background-clip:padding-box;
    border-radius:15px;
    }

在webkit内核的浏览器上，我们甚至可以实现利用字体裁剪背景图片。如我们想要字体的样子为网格状，可以这样子实现：

#test{
    background:url(test.jpg) no-repeat green;
    height:222px;
    width:222px;
    text-align:center;
    font-size:55px;
    font-weight:bold;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

使用的背景图片为：

效果为：

可以看出，如果我们使用的字体越粗，效果越明显，这可以让我们不使用图片就做出一些效果，减少因为图片而导致的http请求。不过这个特性目前只有webkit内核的浏览器支持。

4.背景大小缩放：background-size

backgound-size有三种赋值。
第一，数字赋值：

#test{
    background-size:200px 300px;
}

第一个值是背景图片宽度，第二个值是背景图片高度。这是设置为背景图宽度为200px，高度为300px。

第二，适应宽度：

#test{
    background-size:contain;
}

缩放背景图片，使其适应宽度，如图：

第三，适应高度：

#test{
    background-size:cover;
}

缩放图片，使其适应高度，如图：

5.渐变：gradient

gradient接受颜色和角度，具体可见代码：

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
}

第一个值为角度，后面的参数为颜色和百分比对应，用空格隔开。该代码的效果为：

gradient默认从上到下渐变，奇怪的是，添加90deg的角度的话，渐变方向不是转90度，而是180度。而角度为180deg时，渐变方向却会转90度。

IE目前不支持gradient。

6.阴影：box-shadow和text-shadow

text-shadow和box-shadow都有3个参数。

第一个为水平偏移量，第二个为垂直偏移量，第三个为模糊的像素宽度，第四个为颜色（可用rgba颜色）。

如：text-shadow:5px 3px 4px rgba(0,0,0,0.7);

意思是说，阴影部分向右偏移5px，向下偏移3px，模糊宽度为4px，颜色为黑色，并且不透明度为0.7 。

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
    box-shadow:5px 5px 4px rgba(0,0,0,0.7);
}

效果为：

#test{
    height:222px;
    width:222px;
    text-align:center;
    padding:20px;
    border:20px dashed #f0c;
    margin:20px;
    background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);
    background-clip:padding-box;
    text-shadow:5px 5px 4px rgba(21,132,22,1);
}