棘手的边界情况
使用简写属性时，有几个边界情况需要注意。
省略属性
未指定的值会被设为其初始值。这意味着它会覆盖先前设置的值。例如：
cssp {
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 — 四个值分别表示左上角、右上角、右下角和左下角，始终按此顺序，即从左上角开始顺时针旋转：
背景属性
考虑一个具有以下属性的背景：
cssbackground-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;
这四个声明可以缩短为只有一个：
cssbackground: black url("images/bg.gif") no-repeat left top;
（该简写形式实际上等同于上述的完整属性加上 background-attachment: scroll，并且在 CSS3 中还包含一些额外的属性。）
有关更详细的信息，包括 CSS3 属性，请参阅 background。
字体属性
考虑以下声明：
cssfont-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: "Arial", sans-serif;
这 5 个语句可以缩短为以下形式：
cssfont:
italic bold 0.8em/1.2 "Arial",
sans-serif;
这个简写声明实际上等同于上述的完整声明，再加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。
边框属性
对于边框，宽度、颜色和样式可以简化为一个声明。例如，考虑以下 CSS：
cssborder-width: 1px;
border-style: solid;
border-color: black;
它可以简化为：
cssborder: 1px solid black;
外边距和内边距属性
外边距和内边距值的简写版本工作方式类似；margin 属性允许使用一、二、三或四个值来指定简写值。考虑以下 CSS 声明：
cssmargin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
它们与使用四个值的简写声明是相同的。注意，这些值是按顺时针顺序排列的，从顶部开始：上、右、下、左（TRBL，即“trouble”中的辅音字母）。
cssmargin: 10px 5px 10px 5px;
关于单值、双值、三值和四值声明的外边距简写规则如下：
当指定一个值时，它会将相同的外边距应用于所有四个边。
当指定两个值时，第一个外边距应用于上和下，第二个应用于左和右。
当指定三个值时，第一个外边距应用于上，第二个应用于左和右，第三个应用于下。
当指定四个值时，外边距按顺序（顺时针）应用于上、右、下和左。
定位属性
对于定位，top、right、bottom 和 left 的简写版本可以简化为一个声明。例如，考虑以下 CSS：
csstop: 0;
right: 20px;
bottom: 0;
left: 20px;
它可以简化为：
cssinset: 0 20px 0 20px;
与外边距和内边距一样，inset 的值也是按顺时针顺序排列的——上、右、下、左（TRBL）。
通用简写属性
CSS 提供了一个通用的简写属性 all，它会将其值应用于文档中的每个属性。其目的是改变属性的继承模型。
有关 CSS 中继承如何工作的更多信息，请参阅处理冲突或CSS 层叠简介。
简写属性
all
animation
animation-range
background
border
border-block
border-block-end
border-block-start
border-bottom
border-color
border-image
border-inline
border-inline-end
border-inline-start
border-left
border-radius
border-right
border-style
border-top
border-width
column-rule
columns
contain-intrinsic-size
container
flex
flex-flow
font
font-synthesis
font-variant
gap
grid
grid-area
grid-column
grid-row
grid-template
inset
inset-block
inset-inline
list-style
margin
margin-block
margin-inline
mask
mask-border
offset
outline
overflow
overscroll-behavior
padding
padding-block
padding-inline
place-content
place-items
place-self
position-try
scroll-margin
scroll-margin-block
scroll-margin-inline
scroll-padding
scroll-padding-block
scroll-padding-inline
scroll-timeline
text-box
text-decoration
text-emphasis
text-wrap
transition
view-timeline
-webkit-text-stroke
-webkit-border-before
-webkit-mask-box-image
另见
CSS 语法
@ 规则
优先级
继承
CSS 层叠简介
学习：处理冲突
学习：层叠层
CSS 级联与继承模块
视觉格式化模型
初始值、计算值、使用值和实际值
值定义语法
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 此页面最后修改于 2025 年 10 月 13 日，由 MDN 贡献者。
在 GitHub 上查看此页面 • 报告此内容的问题