css3 新属性

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 默认值,不会透过此元素




你可能感兴趣的:(css3 新属性)