1、16進位制的色彩值，如果每兩位的值相同，可以縮寫一半。如：
color: #ffffff => color: #fffcolor: #aabbcc => color: #abc
2、邊框語法糖
邊框：
border: width style color; => border: (邊寬) (樣式) (顏色);
如：border: 1px solid #000;
無邊框可直接寫：border: none
border-top / -bottom / -left / -right 也是一樣的
邊框圖片：
border-image: source slice / width / outset repeat; =>
border-image：（圖片）（裁切區域）/（邊框圖片寬度）/（擴散）（拉伸或平鋪）
如：border-image: url(button.png) 0 14 0 14 stretch;
3、背景語法糖
background: color image repeat attachment position; => backgroud: (顏色) (圖片路徑) (重複) (固定) (位置);
如：background: #fff url('image.png') no-repeat fixed center;
CSS3新寫法：
background: color image repeat attachment position/size origin clip;
=> background:size(圖片大小) origin(定位區域) clip(裁剪)
4、字型語法糖
縮寫字型定義，至少要定義font-size和font-family兩個值
font: style variant weight size/line-height family => font: (樣式) (異體) (粗細) (大小)/(行高) (字型)
5、列表
list的屬性縮寫:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.png);
=> list-style: square inside url(image.png);
取消預設的圓點或序號可以直接寫list-style:none;
6、flex 伸縮佈局
flex-flow: direction wrap; => flex-flow: (排列方向) (換行方式);
flex: grow shrink basis; => flex: (專案的放大比例) (專案的縮小比例) (專案佔據的主軸空間);
flex屬性有兩個快捷值：flex: auto; => flex:1 1 auto 和 flex: none; => flex: 0 0 auto