简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。当然如果对于简写属性不熟悉的人，在看到简写属性的时候是一头雾水，所以在这对CSS简写属性（常用和不常用）来一次温故而知新。本文参考MDN
常用属性
padding
属性构成
该属性是以下属性的简写：
- padding-top
- padding-right
- padding-bottom
- padding-left
语法
padding 属性接受 1~4 个值。每个值可以是 <length> 或 <percentage>。取值不能为负。
- 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
- 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。
/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;
/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;
取值
length：以固定值为内边距。percentage: 相对于包含块的宽度，以百分比值为内边距。
margin
属性构成
该属性是以下属性的简写：
- margin-top
- margin-right
- margin-bottom
- margin-left
语法
margin 属性接受 1~4 个值。每个值可以是 <length> 或 <percentage>。取值不能为负。
- 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
- 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。
/* 应用于所有边 */
margin: 1em;
margin: -3px;
/* 上边下边 | 左边右边 */
margin: 5% auto;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
可取值
length：以固定值为内边距。percentage: 相对于包含块的宽度，以百分比值为内边距。auto: 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
border-radius
属性构成
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
语法（基础版）
border-radius属性接受1、2、4个值。每个值可以是 <length> 或 <percentage>。取值不能为负。
- 当只指定一个值时，该值会统一应用到全部四个角的外边距上。
- 指定两个值时，第一个值会应用于左上角、右下角，第二个值应用于右上角、左下角
- 指定四个值时，依次（顺时针方向）作为左上角、右上角、右下角、左下角的圆角效果
/* 应用于所有圆角效果 */
border-radius: 5px;
/* 应用于左上角、右下角 | 右上角、左下角 */
border-radius: 5em 10em;
/* 应用于 左上角、右上角、右下角、左下角 */
border-radius: 5% 10% 15em 20px;
可取值
length：定义圆形半径或椭圆的半长轴，半短轴。负值无效。percentage: 使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。
总结：上述三个CSS属性的简写具有相同特性：就是在简写的时候适用顺时针转向规则
border
border-top border-right border-bottom border-left border-width border-color border-style 都遵循单、双、三、四值规则, 根据margin、padding规则可知
属性构成
- border-width
- border-style
- border-color
语法
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
取值
- border-width
- border-style
- border-color
background
属性构成
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-attachment
- background-clip
语法
background: #000 url(images/bg.jpg) 0 0/cover no-repeat;
font
属性构成
- font-style
- 值：normal、italic、oblique、
- font-variant
- font-weight
- 值：normal、bold、lighter、bolder、100/900
- font-size
- line-height
- font-family (自定义字体)
语法
font: italic small-caps bold .8em/1.2 Arial, sans-serif;
list-style
属性构成
- list-style-type
- list-style-image
- list-style-position
语法
list-style: square inside;
transition
属性构成
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
语法
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
transform
属性构成
transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
语法
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
