- IE9/10对CSS3属性的支持情况
属性 |
IE9 |
属性 |
IE10 |
rgba |
border-image |
||
hsla |
text-shadow |
||
box-sizing |
animations |
||
background-size |
columns |
||
多背景 |
gradients |
||
box-shadow |
reflections |
||
border-radius |
transforms |
||
transforms 3D |
|||
transtions |
|||
font-face |
|||
flexbox |
|||
content |
|||
dataURI |
|||
display table |
|||
overflow scrolling |
|||
media queries |
|||
选择器 |
IE8 |
选择器 |
IE9 |
nth-child |
|||
nth-last-child |
|||
nth-of-child |
|||
last-child |
|||
first-of-type |
|||
last-of-type |
|||
empty |
|||
enabled |
|||
disabled |
|||
checked |
|||
not |
CSS3选择器分类[(+)考虑兼容,(~)不考虑兼容]
基本选择器(~) |
*,#id, .class, selector,selector N |
层次选择器(~) |
E F, E>F, E+F, E~F |
伪类选择器 |
动态伪类选择器(~) :link/visited 链接伪类选择器 : hover/focus/active 用户行为伪类选择器 |
目标伪类选择器(+) ie9 :target(用来匹配文档的URI中摸个标识符的目标元素,比如URI包含#content,“target”就是匹配content) 应用场景: 高亮显示区块、相互重叠的盒模型显其一 、tabs效果、幻灯片效果、灯箱效果、相册效果 |
|
语言伪类选择器(~) E:lang(language) |
|
UI元素状态伪类选择器(+) ie9+ :checked/enabled/disabled |
|
结构伪类选择器(+)ie9+ :first-child == nth-child(1) (~) :last-child == :nth-last-child(1) :root 在html中,始终指向html E F:nth-child(n) n>=1,n=整数/even /odd/2n+1/-n+1 E F:nth-last-child(n) E:nth-of-type(n) 选择父元素中具有指定元素的第n个E E:nth-of-last-type(n) E:first-of-type == E:nth-of-type(1) E:last-of-type == E:nth-of-last-type(1) E:only-child 选择父元素中只包含一个子元素,并且子元素匹配E E:only-last-type 选择父元素中只包含一个同类型的子元素,且该元素匹配E元素 E:empty 没有子元素且没有文本节点 |
|
否定伪类选择器(+) ie9+ :not() |
|
伪元素(+) |
::first-word/first-line/before/after ::selection(仅ie9支持,火狐:-moz,) |
属性选择器(~) |
E[attr/attr=val/attr|=val(val-)/attr~=val/attr*=val/attr^=val/attr$=val] |
- border-image
border-image : border-image-sourse(none|<image>)
border-image-slice(数字[默认单位px]或者百分比,个数是1-4个)
border-image-width(参照border-width)
border-image-repeat(有水平和垂直,方式:repeat/round/strech)
图片剪切(slice)是将图片剪切成9宫格,repeat的时候,是根据根据以下规则
比如:
不动 |
水平平铺 |
不动 |
垂直平铺 |
水平垂直平铺 |
垂直平铺 |
不动 |
水平平铺 |
不动 |
注意:
repeat:中间向两边平铺,平铺过程中保持背景图片切片的大小,可能造成两端边缘有被剪切的现象
round:对背景图片切片压缩或者伸缩适应边框宽度的大小,进行排列,使其正好显示在区域内。
strech:只会把背景图片切片进行拉伸适应变宽大小
但是,在chrome和Safari下,repeat和round效果一下,都是repeat
- border-radius
border-radius的半径的值等于或者小于border-width的宽度的时候,元素的内角是直角,反之,元素的内角是圆角,圆角的半径为它们的差值,差值越大,圆角幅度越大,差值越小,圆角的幅度也就越小。
图片上直接使用圆角的话,在chrome和Safari下,图片不会被圆角剪切,所以要使用圆角的时候,可以在外层在桃一个元素。
表格应用圆角的时候,当boeder-collapse:collapse的时候,表格不能正常显示,只有border-collapse:separate的时候,表格圆角才能正常显示。
- box-shadow
box-shadow:none|[indet x-offset y-offset blur-radius spread-radius color]
x-offset : 正值,阴影在元素右边,反之
y-offset:正值,阴影在元素下边,反之
blur-radus:阴影的模糊半径,值越大,阴影的边缘越模糊,为0时,不具有模糊效果,效果和边框一样,但是不会占据空间
spread-radius:阴影的扩展半径,为正值的时候,整个阴影都会扩大,负值时,阴影会缩小
- background-attachment
取值为fixed的时候,背景图片不会动,一般应用在html上或者body上,其他元素上不会有效果
- background- origin (css背景的圆点属性)
用来指定背景图片的起点,主要是用来决定background-position的参考起点。
有三种值:padding-box(默认值)/content-box/ border-box
- background-clip(css3背景的剪裁属性)
用来定义背景图片的剪裁区域,和background-origin有几分相似
有三种值:content -box/ padding -box/ border-box(默认值)
content –box:背景仅在内容区域绘制
padding –box:背景图片延伸到padding的外边缘
border-box:背景图片在边框下
另外,还有另外一种属性text是webkit下私有的,配合text-fill-color:transparent可以制作背景图片填充文本的效果
- background-size
可以取值为:auto/整数值/百分比/cover/contain
cove r:是将图片放大,用来铺满整个容器,但是会导致图片失真
contain保持图片原本的宽高比,将图片缩放到宽度或者高度正好适应容器的区域
注意,background-size:cover常配合background-position:center来制作满屏效果
- background-break
内联元素的属性,在火狐下要写成-moz-background-inline-policy
有三种值:bounding-box背景图片在整个内联元素中进行平铺
each-box:背景图片在行内进行平铺
continuous:下一行的背景图像紧挨着上一行的图像进行平铺