一、css3中好用的选择器 css
:target //突出显示活动的HTML锚css3
::after / ::before{content:" ";} //content必须有，若无内容，用空格占位web
二、文字字体
a.导入字体： @font-faceflex
b.文字阴影：text-shadowspa
ps:相关csscode
a.white-space: nowrap; //段落文本不换行orm
b.text-overflow:ellipsis; //文本修剪（ellipsis变为省略号）blog
c.word-break: break-all //断字点换行图片
三、边框
a.border-radius //圆角
b.box-shadow //阴影
制做三角形方法
1 #div1{ 2 width: 0; 3 border-width: 50px; 4 border-style: solid; 5 border-left-color: #f00; 6 border-top-color: #0f0; 7 border-right-color: #ff0; 8 border-bottom-color: #00f; 9 }
四、背景
a.background-clip //对背景图片进行切割，不完整背景（border-box, padding-box, content-box）
b.background-origin //对背景图片设置起始点，完整背景（border-box, padding-box, content-box）
5.弹性盒模型
a.box-flex //在一个div中占几份
b.box-ordinal-group //div的显示次序（包含在含有css display:box;中）
c.flex-direction //元素排列顺序【row：主轴与行内轴方向做为默认的书写模式。即横向从左到右排列（左对齐）。row-reverse：对齐方式与row相反。column：主轴与块轴方向做为默认的书写模式。即纵向从上往下排列（顶对齐）。column-reverse：对齐方式与column相反。】（与display:flex;同时使用）
六、新旧弹性盒模型比较
a.在使用弹性盒模型的时候父元素必需要加display:box 或 display:inline-box:
新版弹性盒模型：flex：display : flex
老版弹性盒模型：box : display : -webkit-box
b.使用box-orient 定义盒模型的主轴方向
新版：flex：flex-direction: row / column
老版：box : -webkit-box-orient:
horizontal 水平显示
vertical 垂直方向
c.box-direction 元素排列顺序
新版：flex : flex-direction: row-reverse / column-reverse;
老版：box : -webkit-box-direction:
normal 正序
reverse 反序
d.box-pack 主轴方向空闲空间设置
新版：flex : justify-content : flex-start / flex-end / center / space-between / space-around;
老版：box : -webkit-box-pack
start 全部子元素在盒子左侧显示，富裕空间在右侧
end 全部子元素在盒子右侧显示，富裕空间在左侧
center 全部子元素居中
justify 富裕空间在子元素之间平均分布
e.box-align 侧轴方向方向空闲空间设置
新版：flex : align-items : flex-start / flex-end / center / baseline
老版：box : -webkit-box-align
start 全部子元素居顶
end 全部子元素居底
center 全部子元素居中
f.box-flex 定义盒子的弹性空间
新版：flex : flex-grow
老版：box : -webkit-box-flex
g.box-ordinal-group 设置元素的具体位置
新版：flex : order
老版：box : -webkit-box-ordinal-group
ps:css3兼容：
-webkit-
-moz-
-ms-
-o-
属性
七、transform经常使用用法
transform: rotate(45deg); //2D旋转
transform: translate(x, y); //2D移动
transform:scale(x,y): //2D缩放
transform:skew(xdeg,ydeg): //2D扭曲（平行四边形）
transform:rotate(x,y,z) //须要perspective属性改变视图（视角）
八、translation
translation: 哪一个属性过分（eg:width） 过渡完成须要时间 速度 什么时候开始