1.文本
文字簡(jiǎn)寫(xiě)：
// 傾斜 粗細(xì) 字號(hào)/行高 字體
font: italic bold 1em/1.5 'Courier New', Courier, monospace;
2.盒子模型
1.內(nèi)外外邊距
padding/margin一個(gè)值：上下左右
padding/margin兩個(gè)值：上下 左右
padding/margin三個(gè)值：上 左右 下
padding/margin四個(gè)值： 上 下 左 右
3.邊框圓角
// 四個(gè)角均10px
border-radius:10px;
// 左上角&右下角10px慎陵，左下角&右上角15px
border-radius:10px 15px;
// 左上 右上 右下 左下 即從左上開(kāi)始順時(shí)針
border-radius:10px 15px 20px 25px;
4.visibility與display區(qū)別
// 隱藏元素碎绎，留位置
visibility:hidden;
// 隱藏元素搬瑰，不留位置
display:none;
3.背景
1.背景樣式簡(jiǎn)寫(xiě)
// 背景顏色 背景圖 不重復(fù) 背景剪裁區(qū)域 背景尺寸或是否跟隨滾動(dòng)或背景位置
background:red url(./33.jpg) no-repeat border-box center;
2.盒子陰影
// 水平偏移,垂直偏移,模糊度,顏色
box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
// 水平偏移,垂直偏移,陰影模糊度,陰影擴(kuò)展半徑,顏色 不寫(xiě)inset默認(rèn)外陰影
box-shadow: 0px 0px 20px 4px #888888 inset;
注：顏色可以使用currentColor來(lái)獲取當(dāng)前盒子的color农渊。并且一個(gè)盒子可以有多個(gè)陰影
3.漸變
// 線性漸變：傾斜30°击狮，紅色到綠色
background: linear-gradient(30deg, red, green);
// 徑向漸變：紅色到綠色，漸變方向?yàn)榈撞肯蛑行?background: radial-gradient(at bottom center ,red, green);
4.彈性布局
1.彈性盒子簡(jiǎn)寫(xiě)
// 垂直排列 反向換行
flex-flow: column wrap-reverse;
2.彈性元素簡(jiǎn)寫(xiě)
// 放大尺寸：1 縮小尺寸0 主軸基準(zhǔn)尺寸10%
flex:1 0 10%
5.變形動(dòng)畫(huà)
1.移動(dòng)簡(jiǎn)寫(xiě)
// X軸平移 Y軸平移
transform: translate(100px,100px);
// X軸平移 Y軸平移 Z軸平移（由于Z軸可以無(wú)限遠(yuǎn)毙死，所以不能用百分比）
transform: translate3d(50%, 50%, 100px);
2.縮放簡(jiǎn)寫(xiě)
// 定義 2D 縮放轉(zhuǎn)換, X軸縮放 Y軸縮放
transform: scale(.5,2);
// 定義 3D 縮放轉(zhuǎn)換, X軸縮放 Y軸縮放 Z軸縮放
transform: scale3d(.5,.5,.5);
3.旋轉(zhuǎn)簡(jiǎn)寫(xiě)
// X/Y軸平面旋轉(zhuǎn)（就是中心點(diǎn)）
transform: rotate(90deg);
// 向量：X/Y/Z都轉(zhuǎn)180°
transform: rotate3d(1,1,1,180deg);
4.傾斜簡(jiǎn)寫(xiě)
// X/Y軸傾斜60°
transform: skew(60deg, 60deg);
6.過(guò)渡時(shí)間簡(jiǎn)寫(xiě)
/* 參與過(guò)渡的動(dòng)畫(huà) 貝塞爾曲線 過(guò)渡時(shí)間 延遲時(shí)間 */
transition: border-radius linear 2s 0s,background 2s 2s,width linear 2s 4s,height linear 2s 4s;
7.幀動(dòng)畫(huà)簡(jiǎn)寫(xiě)
和CSS中的其他屬性一樣柜去，可以使用animation組合定義幀動(dòng)畫(huà)。animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性郊酒，用于設(shè)置六個(gè)動(dòng)畫(huà)屬性：
animation-name 幀動(dòng)畫(huà)名字
animation-duration 幀動(dòng)畫(huà)運(yùn)行時(shí)間
animation-timing-function 幀動(dòng)畫(huà)速率
animation-delay 幀動(dòng)畫(huà)播放狀態(tài)（暫停/運(yùn)行）
animation-iteration-count 幀動(dòng)畫(huà)循環(huán)次數(shù)
animation-direction 延遲時(shí)間
