作为一个前端攻城狮，CSS那绝对是基础，可是基础也有掌握不牢的时候。今天就来总结一下容易写错的CSS属性简写问题。
1、background
背景颜色：background-color 基本语法：background-color : transparent | color
背景图像：background-image 基本语法：background-image : none | url ( url )
背景图像铺排：background-repeat 基本语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
背景图像滚动还是固定：background-attachment 基本语法：background-attachment : scroll | fixed
背景图像位置：background-position 基本语法：background-position : length || length或 background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right
以上是经常用到的background属性，大家一般都很熟悉，
其简写方式为：background : background-color || background-image || background-repeat || background-attachment || background-position
可是随着css的发展CSS3中又引入了其他4个属性：
背景的裁剪区域：background-clip 基本语法：background-clip ： border-box | padding-box | content-box | no-clip
border-box：从border区域向外裁剪背景。
padding-box：从padding区域向外裁剪背景。
content-box：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
背景显示区域：background-origin 基本语法：background-origin ： border | padding | content
设置背景图片大小：background-size 基本语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
多重背景background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
例如：background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;
终于完了！这么多属性怎么简写呢？
查了好多资料终于找到了，好东西就该拿出来分享：
其简写方式为：background: background-color||background-image||background-repeat||background-attachment||background-position / background-size||background-origin||background-clip;
注意里面的反斜杠，它更font和border-radius里简写方式使用的反斜杠的用法相似。主要是区别background-position和background-size
例如：background: url(images/1.jpg) no-repeat scroll center center / 50% content-box content-box red ;
或者：background: url(images/1.jpg) 0 0/20px 20px no-repeat,url(images/2.jpg) 50% 50%/contain no-repeat content-box green;
2、font
字体样式：font-style 基本语法：font-style : normal | italic | oblique
设置文本是否为小型的大写字母：font-variant 基本语法：font-variant : normal | small-caps
设置字体的粗细： font-weight 基本语法：font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
设置字体尺寸 ：font-size 基本语法：font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger |smaller | length
设置文本的字体名称序列： font-family 基本语法：font-family : ncursive | fantasy | monospace | serif | sans-serif
其简写方式为：font-style || font-variant || font-weight || font-size /line-height || font-family
例如：font:italic small-caps bold 12px/1.5em arial,verdana;
3、margin & padding 以margin为例，padding相同
其简写方式为：margin:margin-top margin-right margin-bottom margin-left;
例如：margin:1px 1px 1px 1px;
4、border
边框宽度：border-weight 基本语法：border-width : medium | thin | thick | length
边框样式：border-style 基本语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
边框颜色： border-color 基本语法：border-width :color
其简写方式为：border : border-width || border-style || border-color
例如：border:1px solid #000;
5、outline
outline类似border，不同的是border会影响盒模型，而outline不会。
其简写方式为：outline : outline-color || outline-style || outline-width || outline-offset
例如：outline:red solid 1px; outline-offset:15px;
6、border-radius
右上角半径：border-top-right-radius ,
右下角半径：border-bottom-right-radius ,
左下角半径：border-bottom-left-radius ,
左上角半径：border-top-left-radius
当各个圆角半径相同时其简写方式为：border-radius ：border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius;
例如：border-radius:0 6px 6px 6px;一般简写为 border-radius:0 6px 6px;
当各个圆角半径不同时其简写方式为：border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?
例如：border-radius:0px 5px 10px 15px/20px 15px 10px 5px;按照上有下左的规律依次写出每个角的两条边的半径
7、color的简写就不说了，太简单了
不知道总结的好不好，若有错烦指出，谢谢！