CSS 的简写属性

工做中常会看到有人这样写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代码，作到简单明了。

1、定义

简写属性是能够让你同时设置其余几个 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;
复制代码

不定时更新，欢迎关注 ❤