CSS3其他新增属性

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案例

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

效果

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来缩放

<style>
body{line-height:1.5;}
h1{margin:0;font-size:16px;font-family:Arial;}
.test{zoom:normal;}
.test2{zoom:5;}
.test3{zoom:300%;}
</style>

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

<style>
a[href="http://example.com"] {
	pointer-events: none;
}
</style>

** user-select用户选中属性**
• 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;

IE写法：
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: all;
-ms-user-select: element;

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

案例

.test{
	padding:10px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
	background:#eee;}

** filter滤镜属性**

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}