CSS美化背景
背景颜色background-color
背景颜色：background-color，background-cololr该属件除了可以修饰表单,表格,还可以修饰div ,甚至修饰整个页面都可以。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。
语法：
{background-color：颜色 | transparent}
transparent：透明，表示默认值。
属性值：
| 值 |
描述 |
| color_name |
规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number |
规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number |
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent |
默认。背景颜色为透明。 |
| inherit |
规定应该从父元素继承 background-color 属性的设置。 |
背景图片background-image
背景图片：background-image，网页中,既可以使用badkground-color设置背景色,还可以使用background-image 设置背景图,如果将背景图定义在body ,那么那个图片将会成为整个页面的背景图。
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
语法：
{background-image：none | url（"路径"）}
（建议写相对路径）
例如：
background-image: url(bgimage.gif);
属性值：
| 值 |
描述 |
| url('URL') |
指向图像的路径。 |
| none |
默认值。不显示背景图像。 |
| inherit |
规定应该从父元素继承 background-image 属性的设置。 |
背景图片重复background-repeat
背景图片重复：background-repeat，有很多网页,都存在使用图片来作为背景的情况。当图片大小小于背景空间,默认会重复平铺整个网页,但是这种方式不适合绝大多数的页面。所以,此时,我们需要使用background-repeat属性,来决定图片到底是如何重复?比如:重复平铺,水平重复,还是说压根就不重复......
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。
语法：
{background-repeat：repeat | repeatx·····}
属性值：
| 值 |
描述 |
| repeat |
默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x |
背景图像将在水平方向重复。 |
| repeat-y |
背景图像将在垂直方向重复。 |
| no-repeat |
背景图像将仅显示一次。 |
| inherit |
规定应该从父元素继承 background-repeat 属性的设置。 |
固定背景图片background-attachment
固定背景图片：background-attachment，在网页中，一般设置的背景图。如果背景图不足与覆盖整个网页。那么可能出现当页面内容太多，并显示出下拉条的时候。背景图将随着用户滚动鼠标,而发生位置变化。甚至最终背景图不可见。那么如果要解决这种问题,我们就需要对该背景图进行位置固定，此时需要使用到的CSS属性为：background-attachment。
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
语法：
{background-attachment：scroll | fixed | }
属性值：
| 值 |
描述 |
| scroll |
默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed |
当页面的其余部分滚动时，背景图像不会移动。 |
| inherit |
规定应该从父元素继承 background-attachment 属性的设置。 |
背景图片位置background-position
默认情况下，所有的背景图片被定义好之后，默认都会从图片区域的左上角开始显示但是实际在网页开发中,我们可能会要求背景图片出现在背景区域的其他位置上，那么此时，我们就需要使用CSS中background-position这个属性。
语法：
{background-position: 属性值;}
如：
background-position: center;
background-position: 20% 20%;
background-position: 20px 20px;
属性值：
| 值 |
描述 |
|
|
| x% y% |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| Xpos ypos |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
背景图片大小background-size
以前,背景图不够填充整个背景区间时,那会,就会让美工去修改背景图片,将背景图片的宽和高按照我们程序员的要求来进行设计,但是现在我们可以通过 background-size该属性来完成对背景图片大小设置。
语法：
background-size: length|percentage|cover|contain;
例如：
background-size: 50px 60px;
属性值：
| 值 |
描述 |
| length |
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain |
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
背景显示区域background-origin
该属性可以帮助我们去确定背景图，从div、body或者说其他元素的哪个地方(从边框、从pdding ,从content )开始显示。但是它如果图片超出了你规定盒子的范围，超出部分它不会裁剪掉。
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
语法：
background-origin: padding-box|border-box|content-box;
属性值：
| 值 |
描述 |
| padding-box |
背景图像相对于内边距框来定位。 |
| border-box |
背景图像相对于边框盒来定位。 |
| content-box |
背景图像相对于内容框来定位。 |
背景裁剪区域background-clip
background-clip 属性规定背景的绘制区域。
该属性主要定义背景图片的裁剪区域,该属性跟background-origin有几分相似,但是 background-origin不会将超过图片显示区域的内容裁剪掉,而backaround-clip它会。
语法：
background-clip: border-box|padding-box|content-box;
属性值;
| 值 |
描述 |
| border-box |
背景被裁剪到边框盒。 |
| padding-box |
背景被裁剪到内边距框。 |
| content-box |
背景被裁剪到内容框。 |
圆角边框border-radius
在CSS中，我们可以使用border-radius属性来定义圆角边框。
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！
语法：
border-radius: 1-4 length|% / 1-4 length|%;
例如;
border-radius:100px;
border-radius:10%;
属性值：
| 值 |
描述 |
| length |
定义圆角的形状。 |
| % |
以百分比定义圆角的形状。 |
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。这里是基于这个属性的单独对每个叫设置的衍生属性。
边框阴影box-shadow
box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
例如：
box-shadow: 10px 10px 5px #888888;
属性值：
| 值 |
描述 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值。 |
| blur |
可选。模糊距离。 |
| spread |
可选。阴影的尺寸。 |
| color |
可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。