CSS 的简写属性
棘手的边界情况
虽然它们使用起来非常方便，但在使用时，仍需牢记一些边界情况：
省略属性
没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此：
cssp {
background-color: red;
background: url(images/bg.gif) no-repeat left top;
}
以上样式不会将 background 的 color 值设置为 red，而是 background-color 的默认值 transparent。
关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit 的全称属性（longhand property）。
属性的顺序
简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。
两种非常重要的情况如下：
与盒子（box）边界（edge）相关的属性，比如 border-style、margin 或者 padding
与盒子的角（corner）相关的属性，比如 border-radius
盒子边界
在处理和盒子的边界相关的属性时，比如 border-style、margin 或者 padding，始终使用一致的 1 个到 4 个值的语法表示：
单值语法：border-width: 1em，这一个值表示所有的边框宽度：
双值语法：border-width: 1em 2em，第一个值表示垂直方向的值，即 top 和 bottom；第二个值表示水平方向的值，即 left 和 right：
三值语法：border-width: 1em 2em 3em，第一个值表示 top；第二个值表示水平方向的，即 left 和 right；第三个值表示 bottom：
四值语法：border-width: 1em 2em 3em 4em，这四个值分别表示 top、right、bottom、left，即总是从 top 开始的顺时针顺序： Top-Right-Bottom-Left 的首字母与英文单词 trouble 的辅音字母顺序一致：TRBL。你可以按照时钟指针旋转的顺序来记忆：1em 在 12 点钟方向，而 2em、3em 及 4em 分别在 3、6、9 点钟方向。
盒子角
在处理和盒子的角相关的属性时，比如 border-radius，也始终使用一致的 1 个到 4 个值的语法表示：
单值语法：border-radius: 1em，这一个值表示所有的边框宽度：
双值语法： border-radius: 1em 2em，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角：
三值语法：border-radius: 1em 2em 3em，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角：
四值语法：border-radius: 1em 2em 3em 4em，这四个值分别表示 top left、top right、bottom right、bottom left，即总是从 top left 开始的顺时针顺序：
Background 属性
background 有以下属性：
cssbackground-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
可以简写成一行声明：
cssbackground: #000 url(images/bg.gif) no-repeat top right;
简写的形式实际上等价于以上普通属性再加上 background-attachment: scroll 以及 CSS3 中的一些附加属性。
请查阅 background 以了解更详细的信息，包含 CSS3 属性。
Font 属性
下面的声明：
cssfont-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
可以简写成下面的：
cssfont:
italic bold 0.8em/1.2 Arial,
sans-serif;
这个简写声明实际上等价于以上普通属性再加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。
Border 属性
对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：
cssborder-width: 1px;
border-style: solid;
border-color: #000;
可以简写成：
cssborder: 1px solid #000;
Margin 和 Padding 属性
margin 和 padding 值的简写版本类似。下面的 CSS 声明：
cssmargin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left，与“trouble”的辅音字母顺序相同）。
cssmargin: 10px 5px 10px 5px;
Margin 对于多个值有以下的简写规则：
当只有一个值声明时，该值会用于所有四个值。
当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。
当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。
当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针方向）。
通用简写属性
CSS 提供了一个通用的简写属性 all，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型。
查看层叠与继承或 CSS 层叠基础以了解更多关于继承的信息。
参见
CSS 重要概念：
CSS 语法
@ 规则
注释
优先级
继承
盒模型
布局模式
视觉格式化模型
外边距合并
值
初始值
计算值
应用值
实际值
属性值定义语法
简写属性：all、animation、background、border、border-block-end、border-block-start、border-bottom、border-color、border-image、border-inline-end、border-inline-start、border-left、border-radius、border-right、border-style、border-top、border-width、column-rule、columns、flex、flex-flow、font、gap、grid、grid-area、grid-column、grid-row、grid-template、list-style、margin、mask、offset、outline、overflow、padding、place-content、place-items、place-self、scroll-margin、scroll-padding、text-decoration、text-emphasis、transition
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年11月10日 by MDN contributors.
View this page on GitHub • Report a problem with this content