CSS3總結（乾貨）

一、css3中好用的選擇器　　

:target　　　　　　 //突出顯示活動的HTML錨

::after / ::before{content:" ";}　　//content必須有，若無內容，用空格佔位

二、文字

　　a.導入字體： @font-face

　　b.文字陰影：text-shadow

　　ps:相關css

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

　　　　b.text-overflow:ellipsis;　　　　 //文本修剪（ellipsis變爲省略號）

　　　　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） 過渡完成須要時間 速度 什麼時候開始