CSS3的高级特性

CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。

在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。

1.文字阴影

　　1.基本语法

　　.element{

　　　　text-shadow:1px 1px 1px #cccccc;

　　}

　　记住，阴影值的速记规则永远是先右再向下。因此，第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。

　　2.HEX、HSL或RGB颜色都可以,同时要考虑浏览器兼容性。

　　text-shadow:4px 4px 0px #404442;

　　text-shadow:4px 4px 0px hsla(140,3%,26%,0.4);

　　3.px、em或rem都行

　　　　阴影值也可以使用em或rem单位。如下代码

　　　　text-shadow:.039215686em .039215686em 0em #dat7d7;

　　4.取消文字阴影：

　　text-shadow:none;

　　5.左上方文字阴影

　　text-shadow:-4px -4px 0px #dad7d7;

　　6.制作浮雕文字阴影效果

　　　　text-shadow最适合用来制作浮雕文字。这种效果一般最适合应用在非白色背景的深色文字上，搭配以高亮颜色（如纯白色或类似颜色）的阴影。

　　　　想要最好的浮雕文字效果就是：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可。

　　7.多重文字阴影

　　　　制作多重文字阴影，只需将两组值使用逗号分隔开即可，比如：

　　　　text-shadow:0px 1px #ffffff,4px 4px 0px #dad7d7;

2.盒阴影

　　盒阴影的语法和文字阴影完全一样：水平偏移距离、垂直偏移距离、模糊半径，以及阴影颜色：

　　　　box-shadow:0px 3px 5px #444444;

　　但是，盒阴影的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如：

　　　　-ms-box-shadow:0px 3px 5px #444444;

　　　　-moz-box-shadow:0px 3px 5px #444444;

　　　　-webkit-box-shadow:0px 3px 5px #444444;

　　　　box-shadow:0px 3px 5px #444444;

　　1.内阴影

　　　　box-shadow:inset 0 0 40px #000000;

　　2.多重阴影

　　　　box-shadow: inset 0 0 30px hsl(0,0%,0%),
                　　　　　 inset 0 0 70px hsla(0,97%,53%,1);

3.背景渐变

　　1.线性背景渐变

　　　　background: linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);

　　分解线性渐变语法：

　　（1）圆括号中的第一个值（即例子中的90deg,可选）定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如to top right这样的值，这会产生一个朝右上角的对角线渐变。

　　（2）下一个值（例子中的#ffffff 0%）定义的是渐变的“起点”，包括起点的颜色和位置。你也可以使用像bule 20%这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐变开始位置则位于假想的渐变路径的20%处。同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。比如：

　　background: linear-gradient(90deg,#ffffff -50%,#e4e4e4 50%,#ffffff 100%);

　　（3）下一个值指的是“颜色过度点”。我们来回顾一下：沿着90度垂直方向，从白色开始（#ffffff 0%）,向位于渐变路径50%处的#e4e4e4这个颜色（浅灰色）渐变。这里就是渐变中的第一个过度颜色点。如果需要的话，可以在渐变“终点”之前定义更多的过渡颜色点（使用逗号隔开）。

　　（4）圆括号中的最后一个值始终是渐变的”终点“。无论在起点之后放置了多少个过渡颜色点，最后一个值始终是终点。

　　2.径向背景渐变

　　　　语法：

　　　　　　background: radial-gradient(center,ellipse cover,#ffffff 72%,#dddddd 100%);

　　　　分解径向渐变语法

　　　　　（1）我们设定的是radial-gradient(而不是linear-gradient)。然后在圆括号中设定起点。例子中我们用的是center,其实我们也可以使用如25px 25px 这样的值。这就表示从距元素上边和左边均为25像素的那个点开始渐变。

　　　　background: radial-gradient(25px 25px,ellipse cover,#ffffff 72%,#dddddd 100%);

　　　　　（2）下一个值（ellipse cover）,指的是径向渐变的形状和大小。渐变形状要么是circle(圆形，渐变会均匀地向各个方向辐射)，要么是ellipse(椭圆形，在不同的方向辐射量不同)。而渐变形状的大小则有很大的灵活性，大小值可以是下列任何一种。

　　　　　　　　a>.closest-side:(渐变形状是圆形时)以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最近的水平或垂直边为渐变半径。

　　　　　　　　b>.closest-corner:以距离中心点最近的一角为渐变半径。

　　　　　　　　c>.farthest-side:和closest-side正好相反，(渐变形状是圆形时)以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最远的水平或垂直边为渐变半径。

　　　　　　　　d>.farthest-corner:以距离中心点最远的一角为渐变半径。

　　　　　　　　e>.cover:和farthes-corner完全一样。

　　　　　　　　f>.contain:和closest-side完全一样。

　　　　　（3）接下来是渐变起点、过渡颜色点以及终点（这部分和线性渐变是一样的）。

　　　　制作完美CSS3渐变的简便方法：使用在线渐变生成器。网站是：http://www.colorzilla.com/gradient-editor/

　　3.重复渐变

　　　　语法：

　　　　（1）重复线性渐变：

　　　　　　　　background: repeating-linear-gradient(90deg,#ffffff 0px,hsla(0,1%,50%,0.1) 5px);

　　　　（2）重复径向渐变：

　　　　　　　　background: repeating-radial-gradient(2px 2px,ellipse,hsla(0,0%,100%,1) 2px,hsla(0,0%,95%,1) 10px,hsla(0,0%,93%,1) 15px,hsla(0,0%,100%,1) 20px);

4.背景渐变图案

　　　　body{
    　　　　background-color: white;
   　　　　 background-image:
        　　 radial-gradient(hsla(0,0%,87%,0.31) 9px,transparent 10px),
        　　 repeating-radial-gradient(hsla(0,0%,87%,0.31) 0,
                                  hsla(0,0%,87%,0.31) 4px,transparent 5px,
                                  transparent 20px,hsla(0,0%,87%,0.31) 21px,
                                  hsla(0,0%,87%,0.31) 25px,transparent 26px,
                                  transparent 50px);
        　　background-size: 30px 30px,90px 90px;
        　　background-position: 0 0;
　　　　}

　　CSS高手Lea Verou收集了一系列CSS3背景渐变图案，具体请见:http://lea.verou.me/css3patterns/

5.CSS3的响应性

　　可以针对不同的视口使用不同的声明。例如针对较小的视口可以继续使用上一节中的渐变图案。但针对大视口（例如宽度大于等于768像素的视口），可以继续使用背景渐变图案。