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　　　　 ? //陰影

　　　　制作三角形方法　　　

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 }

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） 過渡完成需要時間 速度 何時開始

?

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS3总结（干货）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。