当前位置 博文首页 > Zhang的博客：CSS常用的 复合/简写 属性
CSS复合属性参考手册
我们知道 border 属性可以同时规定边框的粗细、颜色、和边框类型。例如：
border:2px solid blue;
所谓的复合属性就是类型 border 这样的属性，能够一个属性规定对象的多个样式。比
较常见的复合属性有 背景：background 、字体： font 、 边框： border 、外边距：
margin 、内边距 : padding 等。当然，这些属性即可以写在一起。也可以拆分写，例
如： border 属性就可以拆分为： border-width 、border-style 、border-color 。
这里主要介绍复合属性，就不对这些拆分属性一一介绍了。详情可以点击最上方 链接参阅相关内容！
background 拆分写法：
background-color:#009c9c; /* 背景颜色 */
background-image:url(test.gif); /* 背景图片 */
background-position:center; /* 背景图片的位置 */
background-size: 100px 200px; /* 背景图片的大小 */
background-repeat: no-repeat; /* 背景平铺 */
background-origin:border-box； /* 背景图像定位区域 */
background-clip:border-box； /* 背景图像的绘画区域 */
background-attachment: fixed; /* 背景图像是否固定 */
背景缩写属性 可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color 、background-position 、background-size 、background-repeat 、background-origin 、background-clip、background-attachment 和 background-image。
各值之间使用空格隔开。可以只有其中的某几个值，例如：background：＃FF0000 url("test.png"); 是允许的。
复合属性写法：
书写格式：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip
bg-attachment initial|inherit;
默认值：
background: transparent none 0% 0%/auto repeat padding-box border-box scroll
默认值：（解释）
background 透明 无背景图片 背景图片位元元素左上角/图片大小自动 背景图片水平垂直平铺
背景图像填充框的相对位置 背景绘制在边框方框内 背景图片随着页面的滚动而滚动
background书写顺序（规范）
| 参数/值 | 声明 | css版本 |
|---|---|---|
| background-color | 指定要使用的背景颜色 | 1 |
| background-position | 指定背景图像的位置 | 1 |
| background-size | 指定背景图片的大小 | 3 |
| background-repeat | 指定如何重复背景图像 | 1 |
| background-origin | 指定背景图像的定位区域 | 3 |
| background-clip | 指定背景图像的绘画区域 | 3 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 指定要使用的一个或多个背景图像 | 1 |
font 拆分写法（列举最常用的五个值）：
font-style /* 字体的样式 (normal浏览器标准字体样式 italic 斜体 oblique
斜体 inherit继承父级)*/
font-weight /* 字体粗细 normal正常 bold 加粗 bolder 更粗 lighter 更细*/
font-size /* 字体大小。*/
line-height /* 设置行高（行间的距离）*/
font-family /* 字体类型（如：宋体 楷体 微软雅黑 arial）*/
书写格式：
font:font-style font-weight font-size /line-height font-family
书写解释：
font-size 字体大小 、 font-family 字体类型border 简写书写在一个声明里设置所有的边框属性
border-width /* 边框宽度 */
border-style /* 边框样式 */
border-color /* 边框颜色 */
border 简写非常常用，并且border的书写顺序没有严格的要求。如 border:solid #ff0000; 也是允许的。
书写格式：
border:border-width border-style border-color
border:5px solid red; /*边框宽度：5px 边框样式：实线 红色*/
边框样式可能的值：
