1、css3中好用的選擇器
:target //突出顯示活動的html錨
::after / ::before //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
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 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...
CSS3基礎總結
1 css背景 background attachment 背景影象是否固定或者隨頁面其餘部分滾動 background color 背景顏色 background repeat 背景如何重複 background clip 規定背景的繪製區域 2 css文字 color 文字顏色 directio...
css3 動畫總結
在用css3建立動畫效果之前，首先要先了解下 keyframes 規則 keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。internet explorer 10 firefox 以及 opera 支援 keyfram...