1、box-sizing
有三个值:
content-box 默认值,order padding不计算在width内
padding-box padding计算在width内
border-box padding border计算在width内 是怪异模式
ie8+支持content-box border-box
如在bootstrap里会在*上设置为怪异模式,会隐藏所有页面。
2、perspective
定义3d元素距视图的距离(可以理解为元素到相机的距离,最小看到的元素越大,最大看到的越小)
参数是number px
它的透视效果是其子元素可见的,而不是元素本身。
3、perspective-origin :
设置3d元素的基点位置
设置子元素在相机中的x y 轴的位置。
x:left center right %
y:top center bootom %
x设置元素在相机前x方向的位置。一般会是50%
y设置元素在相机前y方向(上下)的位置。当是负时相机就在元素上方,当是正数时相机在元素的下方。
它设置也是应用在子元素上的。
4、transform-style
定义子元素保留3d转换
参数:float:子元素不保留 preserve-3d子元素保留
5、box-shadow
向元素添加一个或多个阴影
参数:
h-shadow 必需,水平阴影的位置,可负
v-shadow 必需,垂直阴影的位置,可负
blur 可选 模糊距离,需正数,也就是一点颜色到透明的距离
spread 可选 ,阴影尺寸 可为负,
color 阴影颜色
inset 是阴影默认是外阴影
阴影总大小是阴影尺寸加上模糊距离
当外阴影时阴影尺寸负数是无效的,不会有阴影显示。
当为内阴影时,四边的尺寸和模糊值都最在内显示。
inset 50px 0px 50px -50px red
从左颜色到透明的渐变阴影
x值50px向右边50,模糊50,把尺寸向左调-50px,这样就可以把左边显示的渐变位置显示出来
6、calc
添加添加的值计算方法,应用来可用number值的属性如width:calc
是css3新添加的运算方法,可以来计算得出结果
它用在可用数字表示的属性值中 width:calc(50%-50px)<br />
可使用 + - * /运算符<br />
可使用px em % rem 等单位<br />
可用方法内可以用括号来区别讯息<br />
运算符和值变量间用空格隔开<br />
单位可以混合使用<br />
兼容性:ie9+ chorme19+ safari6+。移动端目前全不可用<br />
width: calc(100% - (10px + 5px) * 2);
7、p:first-line
选择每个P元素的首行,并为其设置样式
8、pointer-events
设置或检索在何时成为属性事件的target。
参数:none 设置的元素不会成为鼠标事件的target。事件会透过此元素到下方的元素
auto 默认值,不会透过此元素