CSS3--其他新增属性

关键词：box-shadow、overflow-x、overflow-y、min-width、min-height、max-width、max-height、zoom、pointer-events、user-select、content、filter: blur();

box-shadow属性

语法：box-shadow: none|inset x-offset y-offset blur-radius spread-radius color；

overflow属性

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

min-*/max-*宽高限定属性

宽高限定类属性：min-width、min-height、max-width、max-height
含义：

1. min-width为最小宽度，max-width为最大宽度
2. min-height为最小高度，max-height为最大高度

zoom属性

IE私有属性zoom简介：
zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。

1. zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置
2. 执行的渲染顺序也不同，zoom可能影响到盒子的计算
3. zoom可以触发ie的haslayout属性，解决IE下的多个bug，清除浮动，清除margin重叠等
4. zoom在非IE浏览器中表现为支持放大或者缩小，但是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来缩放
   zoom属性测试：

	<div class="box box1"></div>
	<div class="box box2"></div>

		.box{
			width: 100px;
			height: 100px;
			margin: 20px auto;
			border: 1px solid;
		}
		.box1{
			zoom: 1;
		}
		.box2{
			zoom: 2;
		}

pointer-events属性

pointer-events指针事件属性，简介：

1. 阻止用户的点击动作产生任何效果
2. 阻止缺省即电脑默认状态，鼠标指针的显示
3. 阻止CSS里的hover和active状态的变化触发事件
4. 阻止JavaScript点击动作触发的事件
   pointer-events指针事件属性兼容：
   
   pointer-events指针事件属性案例：

		<a href="https://www.baidu.com">百度</a>
		<a href="https://www.sogou.com">搜狗</a>

		a[href="https://www.sogou.com"]{
			pointer-events: none;
		}

验证后发现第二个a标签不仅无法被点击，而且没有鼠标手形样式。
pointer-events指针事件属性作用：
这个属性非常的实用，在许多网站上过节的时候，页面最上层会用canvas绘制的雨、雪花等。
为了避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的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用户选中属性语法：
注意：有的浏览器不支持个别属性，即兼容有所区别

      /*默认写法*/
      p{
        user-select: none;/*禁止用户选中*/
        user-select: auto;/**/
        user-select: text;/*对用户的选择没有限制*/
        user-select: contain;/**/
        user-select: all;/*目标元素将整体被选中，也就是说不能只选中一部分，在你用鼠标选中部分文字时浏览器会自动选中整个元素里的内容*/
      }
      /*谷歌浏览器写法*/
      p{
        -webkit-user-select: none;
        -webkit-user-select: text;
        -webkit-user-select: all;
      }
      /*火狐浏览器写法*/
      p{
        -moz-user-select: none;
        -moz-user-select: text;
        -moz-user-select: all;
      }
      /*IE写法*/
      p{
        -ms-user-select: none;
        -ms-user-select: text;
        -ms-user-select: all;
        -ms-user-select: element;
      }

filter滤镜属性

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

1. filter模糊滤镜blur(Npx)

给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；可以接受css长度单位，不接受百分比
blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中，会给图像添加一个box，超出范围隐藏。

	img{
        filter: blur(6px);
      }
      img:hover{
        filter: blur(0px);
      }

2. filter亮度brightness(%)

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

	img{
        filter: brightness(2);
      }
      img:hover{
        filter: brightness(1);
      }

3. filter对比度contrast(%)

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

	img{
        filter: contrast(6);
      }
      img:hover{
        filter: contrast(1);
      }

4. filter投影drop-shadow

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

	 img{
        filter: all 0.6s;
      }
      img:hover{
        filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
      }

5. filter灰度 grayscale(%)

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

6. filter色相旋转hue-rotate(deg)

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

7. filter反转图像invert(%)

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

	img{
        transition: all 1s;
      }
      img:hover{
        filter: inherit(100%);
      }

8. filter图像透明度opacity(%)

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

	img{
        transition: all 1s;
      }
      img:hover{
        filter: opacity(0.5);
      }

8. filter饱和度saturate(%)

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

	img{
        transition: all 1s;
      }
      img:hover{
        filter: saturate(200%);
      }

小结：
（1）以上各个滤镜效果可以结合使用，注意: 顺序是非常重要的，如果顺序变了，最后的效果也会发生变化
（2）应用场景：鼠标悬停时图标的高亮与灰化

练习 ：
鼠标悬停时图标的高亮与灰化，图片可以换为其他图片