1.1调色滤镜
通过滤镜可以给元素应用一种或许多种特效，其中一部分滤镜与颜色有关，可用于调亮度，对比度，和饱和度
grayscale灰度值为0-1之间的小数
sepia褐色值为0-1之间的小数
saturate饱和度值为num
hue-rotate色相旋转值为angle
invert反色值为0-1之间的小数
opacity透明度值为0-1之间的小数
brightness亮度值为0-1之间的小数
contrast对比度值为num
blur含糊值为length
drop-shadow暗影
grayscale灰度
假如使用该作用参数里没值的话将会以100%来烘托，取值0-1之间为不同的灰度-webkit-filter:grayscale(1);
sepia
褐色，便是美图秀秀里有个怀旧功能的那种作用，取值也是0-1，-webkit-filter:sepia(1);
saturate饱和度
该特点改动图片的饱和度，取值规模为数字即可，默认值100%，-webkit-saturate(6);
hue-rotate色相旋转
hue-rotate用来改动图片的色相，默认值为0deg，取值为angle，示例：-webkit-filter:hue-rotate(180deg)
invert反色
invert的作用就和相片底片有点类似
opacity透明度
-webkit-filter:opacity(0.3)与opacity特点区别在于，前者的实际作用会取决于它在滤镜链条中的位置，opacity特点则总是在所有的滤镜应用完之后才起作用
brightness亮度
改动图片的亮度，默认值为100%，示例：-webkit-filter:brightness(0.5)
contrast对比度
这个特点取值和饱和度saturate类似
blur含糊
这个特点改动图片的清晰度，默认值为0
drop-shadow暗影
这个类似于box-shadow，给图片加暗影,与box-shadow和text-shadow特点很像，但也有限制和不同的把戏
div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的特点只能添加到盒模型外面，因而内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把选中的所有的非透明区域都做了暗影作用，就相当于一种真正的投影，这儿为了看得更清楚特意把边框弄成虚线，所以能看到凡是边框显示出来的部分，都有drop-shadow特点，但是在严格意义上讲，drop-shadow更应该说是投影
上面是box-shadow，下面是
drop-shadow
多个特点示例：
-webkit-filter:saturate(10)hue-rotate(500deg)grayscale(0.3)
一些好玩的css特效代码
css3刚推出不久，尽管大多数的css3特点在许多盛行的浏览器中不支撑，但我个人觉得还是要尽量开端慢慢的去了解并运用css3(还有html5)，由于我觉得这是一种趋势，它是一种已经被制定的标准。我并不是专门在做前端的，仅仅有时不得不自己去写这些东西，有时喜爱研讨研讨这些，所有以上仅仅我的个人观点。
1、在之前我想在页面做出一个边框为圆角框，形似需要写挺多css代码的(可能我没了解到更好的方法)，在css3里有一个特点创立圆角是非常简单的，设置好角度也能够创立一个圆
border-radius：
126769cf0fc3cad7daf0e3f07bf0b6d7.png
css代码：
仿制代码代码如下:
#test
{
text-align:center;
padding:10px40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px;/*为了让老的Firefox版本支撑*/
}
html代码：
仿制代码代码如下:
border-radius做圆角的例子。
2、CSS3边框阴影，之前我都是直接使用图片做背景实现的作用，用css3中的box-shadow特点也能够做到
box-shadow：
a703f230a2a996ee64941e46e12499bd.png
css代码：
仿制代码代码如下:
#test1
{
box-shadow:10px10px5px#A5A5A5;
width:300px;
height:100px;
}
html代码：
仿制代码代码如下:
3、css3支撑背景图片能够用多张图片
CSS3多重背景图片
7d6dd42abe289266af70bb668b08b38a.png
代码如下:
.box
{
width:464px;
height:300px;
background:url(test1.jpg)00no-repeat,url(test2.jpg)100%0no-repeat;
}
4、text-overflow特点规定当文本溢出包含元素时产生的工作。
此特点支撑堵截容器中的文本，当文本溢出能够给出了一个省略号的特性。
5ba3f1c13b8c9e621e8597c6bf0b904f.png
79dc58a514da02efa2e321f9e240f1fa.png
代码如下:
.test3{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border:1pxsolidblack;
width:400px;
padding:20px;
cursor:pointer;
}
#test3:hover{
white-space:normal;
color:rgba(0,0,0,1);
background:#e3e3e3;
border:1pxsolid#666;
}
当这里显现的内容溢出是会有省略号，鼠标移到文本上面会显现所有内容
5、过渡作用，经过CSS3，我们能够在不运用Flash动画或JavaScript的情况下，当元素从一种款式变换为另一种款式时为元素增加作用。
作用用贴图比较难体现出来，有兴趣自己运转下面代码：
代码如下:
div
{
width:100px;
height:100px;
background:blue;
transition:width2s,height2s;
-moz-transition:width2s,height2s,-moz-transform2s;/*能够支撑Firefox4*/
-webkit-transition:width2s,height2s,-webkit-transform2s;/*能够支撑SafariandChrome*/
-o-transition:width2s,height2s,-o-transform2s;/*能够支撑Opera*/
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);/*能够支撑Firefox4*/
-webkit-transform:rotate(180deg);/*能够支撑SafariandChrome*/
-o-transform:rotate(180deg);/*能够支撑Opera*/
}
把鼠标放上该区域，来查看过渡作用。
