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