CSS3总结（干货）

1、css3中好用的选择器　　

:target　　　　　　 //突出显示活动的HTML锚

::after / ::before{content:" ";}　　//content必须有，若无内容，用空格占位

2、文字

　　a.导入字体： @font-face

　　b.文字阴影：text-shadow

　　ps:相关css

　　　　a.white-space: nowrap;　　　　//段落文本不换行

　　　　b.text-overflow:ellipsis;　　　　 //文本修剪（ellipsis变为省略号）

　　　　c.word-break: break-all　　　　//断字点换行

3、边框

　　a.border-radius　　　　//圆角

　　b.box-shadow　　　　   //阴影

　　　　制作三角形方法　　　

  #div1{
            width: 0;
            border-width: 50px;
            border-style: solid;
            border-left-color: #f00;
            border-top-color: #0f0;
            border-right-color: #ff0;
            border-bottom-color: #00f;
        }

4、背景

　　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;同时使用）

6、新旧弹性盒模型比较

　　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-

　　　　　　属性

7、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属性改变视图（视角）

8、translation

　　translation: 哪个属性过度（eg:width） 过渡完成需要时间 速度 何时开始