CSS3 高级技术

盒阴影容许在元素的内部或者外部创建盒状的阴影效果。它们遵循相同的语法：水平偏移值、垂直偏移值、模糊距离、阴影尺寸，以及阴影颜色。.shadow{ box-shadow:0 3px 5px #444;}默认的box-shadow是设置在元素外部的。另外一个可选关键词inset容许在元素内部使用box-shadow。box-shadow属性可以用于建立一个Inset阴影。使用的语法和普通盒阴影效果唯一的区别是，在前头添加了Inset关键字。.inset{ box-shadow: inset 0 0 40px #000;}所有的功能和之前的是一致的，但是inset声明让浏览器把阴影设在了元素的内部。 多重阴影：和text-shadow一样，可以添加多个box-shadow。使用逗号分隔box-shadow,它们会从底部到顶部（从最后一个到第一个）的顺序被添加。在代码越接近顶层的效果在浏览器展示的时候也越接近顶层。

线性渐变语法 linear-gradient的最简表达方式：

.linear-gradient{
    background:linear-gradient(red,blue);
}

一般而言，渐变将从设定的方向的反方向开始。当没有设置方向的时候，渐变会默认从顶部到底部。

.line-gradient{
  background:linear-gradient(to top right,red,blue);  
}

　　渐变的方向设定为顶部右侧。那么它会从底部左侧开始从红色渐变为蓝色。也可以在第一个参数中写角度。45deg。也可以让渐变效果从不可见的区域中开始。例如：linear-gradient(red -50%, blue);这样渐变会从容器内部不可见的地方就开始渲染。　　

　　渐变效果中的色标是用逗号进行分隔的。第一部分是颜色，第二部分是颜色的位置。

　　要兼容不支持背景渐变效果的浏览器，只需要在之前定义一个背景颜色就可以了。

　　在CSS里建立一个径向渐变也是十分简单的。效果一般是从一个中心发散成为圆形或者椭圆形的渐变效果。

　　CSS滤镜

　　box-shadow有一个显而易见的问题。顾名思义，元素的阴影只能是矩形。然而这并不是想要的结果。我们可以用CSS滤镜来解决这个问题。CSS滤镜是FEML1文档中的一部分。它的支持度并没有box-shadow那么高，但是在渐进增强的方式依然十分不错。如果浏览器不支持滤镜，那么它会将其忽略。

.filter-drop-shadow{
  filter:drop-shadow(8px 8px 6px #333);
}

　　在filter属性后我们首先要声明使用哪种滤镜。drop-shadow和box-shadow拥有相似的语法；X方向偏移量、Y方向偏移量、模糊大小、阴影尺寸和颜色（尺寸和颜色都是可选的）。

　　可用的CSS滤镜。filter:url('./img/');顶一个SVG滤镜来使用。filter:blur(3px);使用一个简单的长度值。filter:brightness(2)：使用从0到1的值或者从0%到100%的值。filter:contrast(2):对比度。值也是0到1。filter:drop-shadow(4px 4px 6px #333):先前提到过。filter:grayscale(.8):使用从0到1或者从0%到100%的值来表示元素灰度化的程度。filter:hue-rotate(25deg):使用0度到360度表示颜色在色轮上的变化角度。filter:invert(75%):使用从0到1的值表示元素中反色的程度。filterLopcaity(50%):使用从0到1的值来改变元素的透明度。这和熟悉的opcity属性是相似的。滤镜是可以多个同时使用的额，这让透明效果可以和其他滤镜效果结合在一起。可以轻松地使用多个滤镜：用空格分隔它们即可。

　　CSS性能的警告

　　“括号外的决定了页面的架构，括号内的决定了页面的性能。-Ben Frain”

　　一些聪明、昂贵的CSS属性会让页面慢下来。它们给浏览器带来了极高的负荷。这是浏览器讨厌做的繁重活。

　　那些在渲染前必须进行计算工作。举个例子，一个是只有单一背景变色的标准DIV容易，另外一个是在多种渐变背景上叠加的一幅半透明的图像，后者必然更加昂贵。因此要慎重的使用滤镜效果。