css3笔记

css3 大多数都不兼容

老版本浏览器前缀
-webkit-transition:1s;老板谷歌
-moz-transition:1s; 老版火狐
-o-transition:1s 老版苹果
transition:1s; 高版
js中
webkitTransition
mozTransition
oTransition
结构选择器：
p:nth-child(1){ background:red;}从1开始 父标签中名为p的子标签
odd奇数行2n-1 even偶数行2n
body *：nth-child(1) 就不用看子元素是什么标签了
nth-last-child(2n) 从后往前看
p:nth-of-type(2) 父级下的第二个p标签
nth-last-of-type(2) 从后找
nth-child(1)=first-child（）
last-child
first-of-type
last-of-type
伪类和伪元素：
伪类用于向某些选择器添加特殊的效果。
伪元素用于将特殊的效果添加到某些选择器。
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
rgba()

-webkit-text-shake:文字描边 有兼容问题 只适合这个webkit
文字排列顺序：
direction:rtl;unicode-bidi:bidi-override;
@font-face:可以把不常见的字体发送到用户电脑中
弹性盒模型：
使用时 父元素必须加display:box或display:inline-box 要加浏览器前缀
display:-webkit-box;-webkit-box-orient:vertical;垂直显示 默认子元素水平显示
-webkit-box-direction:Reverse;反向排序
改变位置
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:5;}
弹性空间管理：box-flex
.box div:nth-of-type(1){-webkit-box-flex:2;}站父级宽度的2分
富裕空间管理box-pack
水平 -webkit-box-pack
start:子元素在盒子左侧显示，富裕空间在右面
end: 子元素在盒子右侧显示，富裕空间在左面
center：子元素居中
justify:子元素平均分布
垂直 -webkit-box-align:
start:子元素在盒子左侧显示，富裕空间在右面
end: 子元素在盒子右侧显示，富裕空间在左面
center：子元素居中
盒阴影： box-shadow
文字阴影 text-shadow(x偏移 y便宜 模糊半径 颜色)里面可以有多层用逗号隔开
box-reflect倒影
direction 方向 above/below/left/right;距离 （可选）渐变（可选）
resize 自由缩放 一定要配合overflow:auto一块使用
both 水平垂直都可以 Horizontal水平 Vertical 垂直
盒模型解析模式
Content-box:标准盒模型 可视=border+padding+content
Border-box:怪异盒模型 width=content