图解css3--笔记
- 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：下一行的背景图像紧挨着上一行的图像进行平铺
