屬性簡(jiǎn)寫
CSS 規(guī)范定義簡(jiǎn)寫屬性的目的在于將那些關(guān)于同一主題的常見屬性的定義集中在一起契耿。如我們已經(jīng)說過的margin、padding、border等。
下面我們?cè)傺a(bǔ)充一些常用的一些屬性簡(jiǎn)寫憎茂。
字體相關(guān)屬性
font 相關(guān)屬性用于設(shè)置字體，主要由以下幾個(gè)屬性組成：
font-family：字體家族
font-size：字體大小
line-height：行高
font-weight：字體粗細(xì)
font-style：字體樣式
font-variant：變體
其簡(jiǎn)寫語法為：
font: size/line-height weight style variant family;
實(shí)例如下：
/* size/line-height | family */font:14px/1.5"微軟雅黑", sans-serif;
圓角屬性
border-radius 的取值其實(shí)和 margin 也差不多锤岸，不過它描述的是角竖幔，順序如下（top-left，top-right是偷，bottom-right拳氢，bottom-left）：
如果是1個(gè)值，則所有角都是蛋铆；如果是2個(gè)值饿幅，則第一個(gè)值對(duì)應(yīng)圖中的1和3，第二個(gè)值對(duì)應(yīng)圖中的2和4戒职；如果是3個(gè)值，則第二個(gè)值對(duì)應(yīng)圖中的2和4透乾；如果是4個(gè)值則表示各個(gè)角
簡(jiǎn)單示例如下：
.box{border-radius:10px15px;}
除此之外洪燥，還因?yàn)閳A角的特殊性磕秤，還有一個(gè)省略模式，但是在說著之前捧韵，得先了解圓角的弧度是怎么計(jì)算的市咆。
我們的圓角弧度可以是圓或橢圓的弧度。當(dāng)使用一個(gè)半徑時(shí)則確定一個(gè)圓形再来；當(dāng)使用兩個(gè)半徑時(shí)則確定一個(gè)橢圓蒙兰，這個(gè)(橢)圓與邊框的交集形成圓角效果。如下圖：
這樣當(dāng)我們有2個(gè)半徑時(shí)芒篷，則省略模式為：
border-radius: X半徑 / Y半徑
X半徑與Y半徑的取值模式跟上面一個(gè)半徑時(shí)一樣搜变，都可以是1-4個(gè)值，如：border-radius: 10px 20px / 5px 10px 15px;
更多關(guān)于圓角的設(shè)置可參看MDN的border-radius介紹针炉。
背景相關(guān)屬性簡(jiǎn)寫
簡(jiǎn)單的 background 的屬性由 background-color挠他、background-image、background-repeat篡帕、background-position 組成（還有一個(gè)background-attachment殖侵，不過一般不用），如下：
/* 簡(jiǎn)寫前 */.bg{background-color:#fff;background-image:url(images/bg.png);background-repeat: no-repeat;background-position: bottom right;}/* 簡(jiǎn)寫后 */.bg{background:#fffurl(images/bg.png) no-repeat bottom right;}
但是 CSS3 時(shí)代又加入了 background-size镰烧、background-origin拢军、background-clip 及多個(gè)值，整體上比之前復(fù)雜了很多怔鳖，但是沒關(guān)系茉唉，這些新加的屬性你可以單獨(dú)寫（先建議單獨(dú)寫，因?yàn)榭赡苓@些新的屬性還有些瀏覽器兼容問題）败砂。
.bg{background:#fffurl(images/bg.png) no-repeat bottom right;background-size: cover;}
動(dòng)畫相關(guān)屬性
動(dòng)畫部分我們第三章會(huì)講到赌渣，可以先大概了解。
transition
transition用于過渡動(dòng)畫昌犹，跟background差不多坚芜，transition屬性也是由幾個(gè)屬性組成，如下：
transition-property：應(yīng)用過渡效果的CSS屬性名稱
transition-duration：過渡效果花費(fèi)的時(shí)間
transition-timing-function：過渡效果的時(shí)間曲線
transition-delay：過渡效果何時(shí)開始
其簡(jiǎn)寫語法為：
transition: property duration timing-function delay;
animation
animation用于幀動(dòng)畫斜姥，在屬性組成上鸿竖，只是比transition多了幾個(gè)而已。
animation-name：@keyframes 動(dòng)畫的名稱
animation-duration：動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒
animation-timing-function：動(dòng)畫的速度曲線
animation-delay：動(dòng)畫何時(shí)開始
animation-iteration-count：動(dòng)畫被播放的次數(shù)
animation-direction：動(dòng)畫是否在下一周期逆向地播放
animation-play-state：動(dòng)畫是否正在運(yùn)行或暫停
animation-fill-mode：動(dòng)畫時(shí)間之外的狀態(tài)
其簡(jiǎn)寫語法為：
animation: name duration timing-function delay iteration-count direction play-state fill-mode;
值簡(jiǎn)寫
除了屬性可以通過組合的形式進(jìn)行簡(jiǎn)寫铸敏，一些滿足條件的值也可以進(jìn)行適當(dāng)?shù)摹巴倒p料”缚忧。
一般來說以0+單位出現(xiàn)的值，都可以直接用0杈笔，省略單位闪水，如0px可直接寫成0（但0deg不允許去掉 deg ）
同樣一般小于1的小數(shù)的都可以省略前面的0，如0.3s可以直接寫.3s
顏色值如果采用十六進(jìn)制蒙具，表示紅綠藍(lán)的每?jī)晌欢家粯拥脑捛蛴埽梢允÷砸晃恍喾省Ｈ?ff0000、#336699持钉、#cccccc衡招，則可省略為#f00，#369每强，#ccc始腾，但是#ff0122（表示綠色的01不一樣），#3f3f3f（表示紅色的3f不一樣空执，同樣表示綠色和藍(lán)色也不一樣）則不能省略
