工作中常会看到有人这样写CSS

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
复制代码

还有这样的:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
复制代码

总之冗余的代码很多，项目代码看起来就像一个粽子，看着不舒服。今天分享一个CSS的简写属性，让更多的人规范CSS代码，做到简单明了。

一、定义

简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性，可以编写更简洁、更具可读性的样式表，节省时间和精力。

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。

Border 属性

对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：

border-width: 1px;
border-style: solid;
border-color: #fff;
复制代码

可以简写成：

border: 1px solid #000;
复制代码

Margin 和 Padding 属性

margin 和 padding 值的简写版本类似。請看下面的 CSS 声明：

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
复制代码

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left）

margin: 10px 5px 10px 5px;
padding: 10px 5px 10px 5px;
复制代码

Background 属性

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
复制代码

可以简写成一行声明:

background: #000 url(images/bg.gif) no-repeat top right;
复制代码

Font 属性

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
复制代码

可以简写成下面的：

font: italic bold .8em/1.2 Arial, sans-serif;
复制代码

border-radius属性

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
复制代码

可以简写成下面的：

border-radius: 1em/5em;
复制代码