CSS背景
---------- 既有css3之前的用法也有css3的用法，没有区分出来哈，我想要速成就没有管这个。
CSS设置背景颜色：属性background-color，这个属性的作用范围是，background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。这个器是很关键的。验证如下：margin是没有效果的。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/backgroud-color.css" />
</head>
<body>
<div id="div1"><p>this is p</p></div>
<div id="div2"><p>this is p</p></div>
<div id="div3"><p>this is p</p></div>
</body>
</html>
//css内容
p {
margin: 0px;
}
div {
background-color: red;
}
#div2 {
padding: 10px;
}
#div3 {
padding: 10px;
border-style: solid; //设置边框
border-width: 5px; //设置大小
border-color: transparent; //设置透明
}
CSS 内边距属性
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
CSS设置背景图片：
CSS 背景属性（Background）
| 属性 | 描述 | CSS |
|---|---|---|
| background | 在一个声明中设置所有的背景属性。 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
早期只能这样使用，这个时候设置图片的时候有两个问题，图片小和图片太大怎么设置。
太小的图片只能从设置背景图像是否及如何重复入手，太大的图片只有设置图片的起始位置入手。到了css3过后，我们对图片的大小其实是可以控制的。
body {
background-image: url(../img/56e13c46c23ed.jpg);
background-repeat:no-repeat ;
background-size:cover;//适应比例的缩放
background-repeat:repeat-y;
background-attachment: fixed;//固定了背景图片，就算图片没有图片长也不会出问题。
}
最后说一个新特性：CSS3可以使用多张背景图片，有些图片的阴影就是这样制作的：
body
{
background-image:url(xxx.gif),url(xxxx_2.gif);
}试试当一个页面来操作一下：
博客并不能写css文件,
来源：oschina
链接：https://my.oschina.net/u/2285811/blog/688913