CSS3---其他新增属性

【前言】本节介绍下其他CSS3常用属性
【内容】
box-shadow盒阴影属性，语法：
box-shadow: none|inset x-offset y-offset blur-radius spread-radius color；
属性值描述：
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，越模糊） spread-radius（阴影扩展半径，可正可负） color（设置对象的阴影的颜色）
box-shadow盒阴影，属性列表：

盒阴影box-shadow案例


overflow属性
overflow类属性：overflow、overflow-x、overflow-y
作用：这类属性用于定义溢出元素内容区的内容会如何处理。

*min-*/max-宽高限定属性
宽高限定类属性min-width、min-height、max-width、max-height
含义：
min-width为最小宽度，max-width为最大宽度
min-height为最小高度，max-height为最大高度

zoom属性
IE私有属性zoom简介：
zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。
①zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置
②执行的渲染顺序也不同，zoom可能影响到盒子的计算
③zoom可以触发ie的haslayout属性，解决IE下的多个bug，清除浮动，清除margin重叠等
④zoom在非IE浏览器中表现为支持放大或者缩小，但是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来缩放

pointer-events属性
pointer-events指针事件属性
简介：
pointer-events是一个与js有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。
①阻止用户的点击动作产生任何效果
②阻止缺省即电脑默认状态，鼠标指针的显示
③阻止CSS里的hover和active状态的变化触发事件
④阻止JavaScript点击动作触发的事件

pointer-events指针事件属性兼容

canvas案例
分享几个canvas画布制作的网上案例
可视化音频：http://demo.lanrenzhijia.com/demo/62/6294/demo/
雪花：http://demo.lanrenzhijia.com/demo/77/7747/demo/
彩色气泡：http://demo.lanrenzhijia.com/demo/79/7965/demo/
烟雾消散：http://demo.lanrenzhijia.com/demo/91/9193/demo/
赛车游戏：http://demo.lanrenzhijia.com/demo/51/5198/demo/

user-select用户选中属性简介：
user-select属性用来禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选。也可以只允许用户选中文字，或者全部都放开，用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的，它不仅可以作用整个页面，也可以只在指定的元素和其子元素上生效。
注意：使用时需要添加各种浏览器引擎前缀
user-select用户选中属性语法
默认写法：
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

谷歌浏览器写法：
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all;

火狐浏览器写法：
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

IE写法：
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: all;
-ms-user-select: element;
注意：有的浏览器不支持个别属性，即兼容有所区别。

user-select用户选中属性测试：
（1）none：禁止用户选中，此时无法选中任意页面元素

（2）text：对用户的选择没有限制，此时可以选中任意元素

（3）all：目标元素将整体被选中，也就是说不能只选中一部分，在你用鼠标选中部分文字时，浏览器会自动选中整个元素里的内容。

filter滤镜属性
简介：
filter滤镜属性时CSS3中的一个属性，但IE不支持（IE有它专属的滤镜方式）。有兴趣的可以在网上找到与CSS3 filter对应的IE滤镜方式，本节针对IE滤镜不做过多介绍。
涉及效果：
模糊滤镜、亮度、对比度、投影、灰度、色相旋转、反转图像、透明度、饱和度等等。

filter模糊滤镜blur(Npx)
给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；可以接受css长度单位，不接受百分比



blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中，会给图像添加一个box，超出范围隐藏。

filter亮度brightness(%)
使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。
注意：写brightness(2) 与brightness(200%) 效果一样

filter对比度contrast(%)
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。

filter投影drop-shadow
投影drop-shadow(x偏移 y偏移 模糊范围 颜色)，与 box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。


filter灰度 grayscale(%)
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。若未设置，值默认是0。也可以写0-1之间的小数。

filter色相旋转hue-rotate(deg)
给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
色相环如下所示

filter色相旋转hue-rotate(deg)

filter反转图像invert(%)
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

filter图像透明度opacity(%)
图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

filter饱和度saturate(%)
值为0%则是完全不饱和，值为100%则图像无变化。大于100%，则饱和度增高，色彩就会变重。