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盒阴影属性，语法：
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来缩放

zoom属性测试：

pointer-events属性

pointer-events指针事件属性

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

pointer-events指针事件属性兼容

(1)pointer-events指针事件属性案例：

验证后发现第二个a标签不仅无法被点击，而且没有鼠标手形样式。

(2)pointer-events指针事件属性案例：

此时由于nav_top的div位于a标签之上，所以无法点击到a标签

(3)pointer-events指针事件属性案例：
接下来给上方的nav_top层加上一个pointer-events:none属性，再次测试下

此时就可以穿过nav_top层去点击下面的a标签了，此时这个nav_top层相当于可看不可摸了。

pointer-events指针事件属性作用：

为什么说这个属性非常的实用呢，在许多网站上过节的时候，页面最上层会用canvas绘制的雨、雪花等。

为了避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的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用户选中属性语法

user-select用户选中属性测试：
none：禁止用户选中
text：对用户的选择没有限制
all：目标元素将整体被选中，也就是说不能只选中一部分，在你用鼠标选中部分文字时，浏览器会自动选中整个元素里的内容。

（1）none：禁止用户选中，此时无法选中任意页面元素

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

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

验证后发现只要选中个别字体，整个元素内容都会被选中。

filter滤镜属性

filter滤镜属性简介：

filter滤镜属性时CSS3中的一个属性，但IE不支持（IE有它专属的滤镜方式）。有兴趣的可以在网上找到与CSS3 filter对应的IE滤镜方式，本节针对IE滤镜不做过多介绍。

涉及效果：
模糊滤镜、亮度、对比度、投影、灰度、色相旋转、反转图像、透明度、饱和度等等。

(1）filter模糊滤镜blur(Npx)

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

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

(2）filter亮度brightness(%)

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

（3）filter对比度contrast(%)

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

（4）filter投影drop-shadow

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

（5）filter灰度 grayscale(%)

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

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

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

（7**）filter色相旋转hue-rotate(deg)**

（8）filter反转图像invert(%)

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

(9）filter图像透明度opacity(%)

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

（10）filter饱和度saturate(%)

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

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