简写属性

简写属性（Shorthand properties）是 CSS 的一种属性，其允许你同时为多个其他 CSS 属性设置值。使用简写属性，你可以写出更简洁（通常也更具可读性）的样式表，从而节省时间和精力。

CSS 规范定义了简写属性，用于将作用于同一主题的通用属性的定义组合在一起。例如，CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。同样，最常见的字体相关属性可以使用简写属性 font 来定义，而盒子周围的不同外边距则可以使用 margin 简写属性来定义。

棘手的边界情况

使用简写属性时，有几个边界情况需要注意。

省略属性

未指定的值会被设为其初始值。这意味着它会覆盖先前设置的值。例如：

css

p {
  background-color: red;
  background: url("images/bg.gif") no-repeat left top;
}

这不会将背景颜色设置为 red，而是会将其设置为 background-color 的默认值，即 transparent。

只有单个属性的值可以被继承。由于缺失的值会被其初始值替换，因此无法通过省略它们来继承单个属性。关键字 inherit 可以应用于一个属性，但只能作为一个整体，而不能作为某个特定值的关键字。这意味着要让某个特定的值被继承，唯一的方法是使用带有 inherit 关键字的完整属性。

属性值的顺序

简写属性尽量不强制规定其所替代的属性值的特定顺序。当这些属性使用不同类型的值时，这样做效果很好，因为顺序无关紧要。但是，当多个属性可以有相同的值时，这就没那么容易了。

这里有两个重要的情况：

与盒子的边相关的属性，如 border-style、margin 或 padding
与盒子的角相关的属性，如 border-radius

盒子的边

处理与盒子边缘相关的简写属性，如 border-style、margin 或 padding，总是使用一种一致的一到四个值的语法来表示这些边：

单个值语法： border-width: 1em — 单个值表示所有边：
两个值语法： border-width: 1em 2em — 第一个值表示垂直方向的边，即上边和下边；第二个值表示水平方向的边，即左边和右边：
三个值语法： border-width: 1em 2em 3em — 第一个值表示上边，第二个值表示水平方向的边，即左边和右边，第三个值表示下边：
四个值语法： border-width: 1em 2em 3em 4em — 四个值分别表示上、右、下、左四个边，始终按此顺序，即从顶部开始顺时针旋转：上-右-下-左（Top-Right-Bottom-Left）的首字母缩写为 TRBL。你也可以将其记为时钟指针旋转的顺序：1em 从 12 点钟位置开始，然后 2em 在 3 点钟位置，3em 在 6 点钟位置，4em 在 9 点钟位置。

盒子的角

同样地，处理与盒子角相关的简写属性，如 border-radius，也总是使用一致的一到四个值的语法来表示这些角：

单个值语法： border-radius: 1em — 单个值表示所有角：
两个值语法： border-radius: 1em 2em — 第一个值表示左上角和右下角，第二个值表示右上角和左下角：
三个值语法： border-radius: 1em 2em 3em — 第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角：
四个值语法： border-radius: 1em 2em 3em 4em — 四个值分别表示左上角、右上角、右下角和左下角，始终按此顺序，即从左上角开始顺时针旋转：

背景属性

考虑一个具有以下属性的背景：

css

background-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;

这四个声明可以缩短为只有一个：

css

background: black url("images/bg.gif") no-repeat left top;

（该简写形式实际上等同于上述的完整属性加上 background-attachment: scroll，并且在 CSS3 中还包含一些额外的属性。）

有关更详细的信息，包括 CSS3 属性，请参阅 background。

字体属性

考虑以下声明：

css

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: "Arial", sans-serif;

这 5 个语句可以缩短为以下形式：

css

font:
  italic bold 0.8em/1.2 "Arial",
  sans-serif;

这个简写声明实际上等同于上述的完整声明，再加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。

边框属性

对于边框，宽度、颜色和样式可以简化为一个声明。例如，考虑以下 CSS：

css

border-width: 1px;
border-style: solid;
border-color: black;

它可以简化为：

css

border: 1px solid black;

外边距和内边距属性

外边距和内边距值的简写版本工作方式类似；margin 属性允许使用一、二、三或四个值来指定简写值。考虑以下 CSS 声明：

css

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

它们与使用四个值的简写声明是相同的。注意，这些值是按顺时针顺序排列的，从顶部开始：上、右、下、左（TRBL，即“trouble”中的辅音字母）。

css

margin: 10px 5px 10px 5px;

关于单值、双值、三值和四值声明的外边距简写规则如下：

当指定一个值时，它会将相同的外边距应用于所有四个边。
当指定两个值时，第一个外边距应用于上和下，第二个应用于左和右。
当指定三个值时，第一个外边距应用于上，第二个应用于左和右，第三个应用于下。
当指定四个值时，外边距按顺序（顺时针）应用于上、右、下和左。

定位属性

对于定位，top、right、bottom 和 left 的简写版本可以简化为一个声明。例如，考虑以下 CSS：

css

top: 0;
right: 20px;
bottom: 0;
left: 20px;

它可以简化为：

css

inset: 0 20px 0 20px;

与外边距和内边距一样，inset 的值也是按顺时针顺序排列的——上、右、下、左（TRBL）。

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 10 月 13 日⁩，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题

简写属性

棘手的边界情况

省略属性

属性值的顺序

盒子的边

盒子的角

背景属性

字体属性

边框属性

外边距和内边距属性

定位属性

通用简写属性

简写属性

另见

帮助改进 MDN