css简写

属性简写

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。如我们已经说过的margin、padding、border等。

下面我们再补充一些常用的一些属性简写。

字体相关属性

font 相关属性用于设置字体，主要由以下几个属性组成：

font-family：字体家族

font-size：字体大小

line-height：行高

font-weight：字体粗细

font-style：字体样式

font-variant：变体

其简写语法为：

font: size/line-height weight style variant family;

实例如下：

/* size/line-height | family */font:14px/1.5"微软雅黑", sans-serif;

圆角属性

border-radius 的取值其实和 margin 也差不多，不过它描述的是角，顺序如下（top-left，top-right，bottom-right，bottom-left）：

如果是1个值，则所有角都是；如果是2个值，则第一个值对应图中的1和3，第二个值对应图中的2和4；如果是3个值，则第二个值对应图中的2和4；如果是4个值则表示各个角

简单示例如下：

.box{border-radius:10px15px;}

除此之外，还因为圆角的特殊性，还有一个省略模式，但是在说着之前，得先了解圆角的弧度是怎么计算的。

我们的圆角弧度可以是圆或椭圆的弧度。当使用一个半径时则确定一个圆形；当使用两个半径时则确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。如下图：

这样当我们有2个半径时，则省略模式为：

border-radius: X半径 / Y半径

X半径与Y半径的取值模式跟上面一个半径时一样，都可以是1-4个值，如：border-radius: 10px 20px / 5px 10px 15px;

更多关于圆角的设置可参看MDN的border-radius介绍。

背景相关属性简写

简单的 background 的属性由 background-color、background-image、background-repeat、background-position 组成（还有一个background-attachment，不过一般不用），如下：

/* 简写前 */.bg{background-color:#fff;background-image:url(images/bg.png);background-repeat: no-repeat;background-position: bottom right;}/* 简写后 */.bg{background:#fffurl(images/bg.png) no-repeat bottom right;}

但是 CSS3 时代又加入了 background-size、background-origin、background-clip 及多个值，整体上比之前复杂了很多，但是没关系，这些新加的属性你可以单独写（先建议单独写，因为可能这些新的属性还有些浏览器兼容问题）。

.bg{background:#fffurl(images/bg.png) no-repeat bottom right;background-size: cover;}

动画相关属性

动画部分我们第三章会讲到，可以先大概了解。

transition

transition用于过渡动画，跟background差不多，transition属性也是由几个属性组成，如下：

transition-property：应用过渡效果的CSS属性名称

transition-duration：过渡效果花费的时间

transition-timing-function：过渡效果的时间曲线

transition-delay：过渡效果何时开始

其简写语法为：

transition: property duration timing-function delay;

animation

animation用于帧动画，在属性组成上，只是比transition多了几个而已。

animation-name：@keyframes 动画的名称

animation-duration：动画完成一个周期所花费的秒或毫秒

animation-timing-function：动画的速度曲线

animation-delay：动画何时开始

animation-iteration-count：动画被播放的次数

animation-direction：动画是否在下一周期逆向地播放

animation-play-state：动画是否正在运行或暂停

animation-fill-mode：动画时间之外的状态

其简写语法为：

animation: name duration timing-function delay iteration-count direction play-state fill-mode;

值简写

除了属性可以通过组合的形式进行简写，一些满足条件的值也可以进行适当的“偷工减料”。

一般来说以0+单位出现的值，都可以直接用0，省略单位，如0px可直接写成0（但0deg不允许去掉 deg ）

同样一般小于1的小数的都可以省略前面的0，如0.3s可以直接写.3s

颜色值如果采用十六进制，表示红绿蓝的每两位都一样的话，可以省略一位。如#ff0000、#336699、#cccccc，则可省略为#f00，#369，#ccc，但是#ff0122（表示绿色的01不一样），#3f3f3f（表示红色的3f不一样，同样表示绿色和蓝色也不一样）则不能省略