CSS 提供了许多简写属性，可以同时设置多个相关属性的值，从而减少代码量并提高可读性。以下是一些常用的 CSS 简写属性和属性值的示例：
1. font 属性:
font 属性可以同时设置字体、字号、行高、字体粗细、字体样式等多个属性。
-
示例:
/* longhand */ font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 16px; line-height: 1.5; font-family: Arial, sans-serif;/* shorthand */ font: italic small-caps bold 16px/1.5 Arial, sans-serif; -
顺序要求:
font-style、font-variant、font-weight顺序可以互换，但font-size和font-family是必须的，且必须以这个顺序出现。/line-height可选，放在font-size后面。
2. background 属性:
background 属性可以同时设置背景颜色、背景图片、背景重复方式、背景位置、背景附件等多个属性。
-
示例:
/* longhand */ background-color: #f0f0f0; background-image: url("image.jpg"); background-repeat: no-repeat; background-position: center top; background-attachment: fixed;/* shorthand */ background: #f0f0f0 url("image.jpg") no-repeat center top fixed; -
顺序建议: 虽然
background属性的各个值顺序比较灵活，但建议遵循一定的顺序，例如：background-color、background-image、background-repeat、background-position、background-size、background-attachment、background-origin、background-clip。
3. margin 和 padding 属性:
margin 和 padding 属性分别用于设置元素的外边距和内边距。它们可以使用一个、两个、三个或四个值来简写。
-
一个值: 所有四个方向都使用相同的值。
-
两个值: 第一个值应用于上下方向，第二个值应用于左右方向。
-
三个值: 第一个值应用于上方向，第二个值应用于左右方向，第三个值应用于下方向。
-
四个值: 分别应用于上、右、下、左四个方向 (顺时针)。
-
示例:
/* longhand */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;/* shorthand */ margin: 10px 20px 30px 40px; /* top right bottom left */ margin: 10px 20px; /* top/bottom right/left */ margin: 10px; /* all sides */
4. border 属性:
border 属性可以同时设置边框宽度、边框样式和边框颜色。
- 示例:
/* longhand */ border-width: 2px; border-style: solid; border-color: black;/* shorthand */ border: 2px solid black;
5. border-radius 属性:
border-radius 属性用于设置圆角边框。它可以使用一个或两个值来简写。
- 一个值: 所有四个角都使用相同的值。
- 两个值: 第一个值应用于左上和右下角，第二个值应用于右上和左下角。
除了以上这些，还有其他一些简写属性，例如 list-style、outline、flex、grid 等。 使用简写属性可以使代码更简洁易读，但也需要注意各个属性值的顺序和含义，避免出现意外的结果。 建议查阅 MDN Web Docs 或其他可靠的 CSS 参考文档，了解更多关于 CSS 简写属性的详细信息。
