CSS----其他新增属性

前言

本节介绍下其他CSS3常用属性

关键词：

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

1.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案例】

2.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为最大高度

3.zoom属性

IE私有属性zoom简介：

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

4.pointer-events属性

pointer-events指针事件属性

pointer-events是一个与js有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。

• ①阻止用户的点击动作产生任何效果
• ②阻止缺省即电脑默认状态，鼠标指针的显示
• ③阻止CSS里的hover和active状态的变化触发事件
• ④阻止JavaScript点击动作触发的事件

pointer-events指针事件属性兼容

5.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/

6.user-select用户选中属性

• user-select用户选中属性简介：
• user-select属性用来禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选。也可以只允许用户选中文字，或者全部都放开，用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的，它不仅可以作用整个页面，也可以只在指定的元素和其子元素上生效。

注意：

使用时需要添加各种浏览器引擎前缀

user-select用户选中属性语法

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

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

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

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

7.filter滤镜属性

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

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