定义
简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。
CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，最常见的字体相关的属性可以使用 font 的简写，盒子（box）各方向的外边距（margin） 可以使用 margin 这个简写。
1. Font 属性
font-family，font-style，font-variant，font-weight，font-size，font
font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;
font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;
font-weight (字体浓淡):是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em
如果用 font 属性的话，就可以把几个样式进行简化，减少书的情况；font 属性的值应按以下次序书写(各个属性之间用空格隔开)：
字体样式 | 字体变化 | 字体浓淡 | 字体大小 | 字体族
font-style | font-variant | font-weight | font-size | font-family
例如：
.text{
font-style:italic;
font-variant:normal;
font-weight:bold;
font-size:30px;
font-family:arial, sans-serif;
}
上面的样式简写为：
.text{font:italic normal bold12pxarial,verdana;}
2. Background 属性
background-color：#999999； //元素的背景色
background-image : url("bg-img.png"); //设置背景图像
background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式
background-attachment : fixed | scroll; //设置背景图片的固定方式
background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];
//设置背景的左上角位置,坐标可以是以百分比或固定单位
background 可以用这个属性把前面几个综合起来进行简写
background 各个值的次序依次如下：
背景色| 背景图 | 背景图重复方式 | 背景图固定方式 | 背景图坐标
background-color | background-image | background-repeat | background-attachment | background-position
如果省略某个属性不写出来，那么将自动为它取缺省值。
比如，如果去掉background-attachment和background-position的话：
background:#FFCC66url("bg-img.png") no-repeat;
例如:
.bg{background-color:#FFCC66;background-image:url("bg-img.png");background-repeat:no-repeat;background-attachment:fixed;background-position:left top;}
上面可以简写为:
.bg{background:#FFCC66url("bg-img.png") no-repeat fixed left top; }
3. Border 属性
border:[border-width ||border-style ||border-color |inherit];
border-width:1px;border-style:solid;border-color:#000;
可以简写成 border:1pxsolid#000;
属性
border-top:1pxsolid#000;
border-right:2pxsolid#000;
border-bottom:3pxsolid#000;
border-left:4pxsolid#000;
可以简写成
border:1px solid#0002px solid #0003px solid #0004px solid #000;
border-style取值
none
No border.
*hidden
Same as 'none', but in the collapsing border model, also inhibits any other border (see the section on border conflicts).
dotted
The border is a series of dots.
dashed
The border is a series of short line segments.
solid
The border is a single line segment.
double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
*inset
In the separated borders model, the border makes the entire box look as though it were embedded in the canvas. In the collapsing border model, drawn the same as 'ridge'.
*outset
In the separated borders model, the border makes the entire box look as though it were coming out of the canvas. In the collapsing border model, drawn the same as 'groove'.
4. border-radius 圆角属性
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
类似边框border属性
取值 [<length> |<percentage> ]{1,2}
border-top-left-radius:5px30%;
border-top-right-radius:5px30%;
border-bottom-right-radius:5px30%;
border-bottom-left-radius:5px30%;
border-radius:5px30%;
如果实现一个圆可以
div{width:100px;height:100px;border:2pxsolid red;border-radius:50%;background:#00ffff;}
5. Margin 和 Padding 属性
注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left
上 | 右 | 下 | 左
padding-top | padding-right | padding-bottom | padding-left
margin-top | margin-right | margin-bottom | margin-left
padding : 1px 2px 3px 4px;
margin : 1px 2px 3px 4px;
6. border-image 属性
引入图片
border-image-source
border-image-source:url(image url);
切割引入的图片
border-image-slice
border-image-slice: [<number> |<percentage> ]{1,4}&& fill?
边框的宽度
border-image-width
border-image-width: [<length> |<percentage> |<number> | auto ]{1,4}
图片的排列方式
border-image-repeat
border-image-repeat: [ stretch | repeat | round ]{1,2}
border-image对表格table的影响
https://drafts.csswg.org/css-backgrounds-3/#border-image-tables
https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution
7. transition 过渡
transition 是一个简写属性，可设置 transition-property, transition-duration, transition-timing-function, transition-delay。 transition用来定义元素在两种状态之间的过渡。不同状态可以用:hover 、:active之类的 pseudo-classes 定义，或者使用 JavaScript 动态设置。
几种动画效果
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
样式
a{
-moz-transition:background0.5sease-in,color0.3sease-out;
-webkit-transition:background0.5sease-in,color0.3sease-out;
-o-transition:background0.5sease-in,color0.3sease-out;
transition:background0.5sease-in,color0.3sease-out;
}
p{
-webkit-transition:all .5sease-in-out1s;
-o-transition:all .5sease-in-out1s;
-moz-transition:all .5sease-in-out1s;
transition:all .5sease-in-out1s;
}
8. list-style 属性
CSS list-style 属性是设置list-style-type, list-style-image 和 list-style-position 的简写属性。
list-style-type取值
none
disc 实心圆点 (默认值)
circle 空心圆点
square 实心方块
decimal 十进制阿拉伯数字 从1开始
cjk-decimal 中日韩十进制数 例如: 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero Decimal numbers Padded by initial zeros E.g. 01, 02, 03, … 98, 99
lower-roman Lowercase roman numerals E.g. i, ii, iii, iv, v…
...
list-style-position
取值
outside 标记盒在主块盒的外面。
inside 标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties
http://blog.csdn.net/shenzhennba/article/details/7356095
https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands
http://www.w3cplus.com/content/css3-border-image
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
https://drafts.csswg.org/css-transitions/#transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
http://www.w3cplus.com/content/css3-transition
https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style
https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type
