CSS 背景和边框

设置背景颜色

background-color

该属性可以接受任意<color>的合法值

背景颜色显示在content和padding的底下

设置背景图片

background-image

有两种情况，第一种背景图片比盒子大，此时背景图片不会自动缩小以适应盒子大小，我们只能看到部分图片；第二种情况，背景图片比盒子小的时候，背景图片会自动tile up，铺满整个盒子。

背景颜色显示在背景图片底下

background-repeat属性控制图片是如何铺满的，可选值有：

• no-repeat — 不重复
• repeat-x — 水平铺满
• repeat-y — 竖直铺满
• repeat — 全铺满

background-size可以调整图片的length, width

同时还可以选择：

cover 图包住盒子
contain 盒子围住图

background-position用来控制图片的位置

左上角为 (0,0) 坐标, 同时也是默认的坐标位置。

可以使用top，bottom，left，right等属性控制。

最多支持4个参数，如top 20px left 20% 表示离top20px，离left20%的距离。

值得注意的是，使用百分比时，使用图片的X%对齐盒子的X%

还可以接受梯度渐变图片，可选的类型有：

• linear-gradient
• radial-gradient
• repeating-radial-gradient/repeating-linear-gradient
• conic-gradient

还可以接受多个图片，多个图片之间用逗号分开，在列表后面的图片被排序在图层的下层。

其他的图片属性也可以对应地匹配图片

有一个问题是，如果分配的值不足，也就是属性值少于图片数量时，属性值会被循环利用。例如只有3个属性值但是有4张图片，则第四张图片会使用第一个属性值。

背景滚动通过 background-attachment 调整

• scroll: 页面滚动时，背景图片也跟着滚动。当滚动内容发生滚动时，背景不滚动。效果是，背景图片固定在页面的某个位置。

• fixed: 图片永远固定在同一个地方，不跟随页面或者元素发生滚动。

• local: 后加属性，图片会跟随滚动内容滚动，但是不会跟随页面发生滚动。

滚动范例

这个属性只在你有一个可滚动元素时起作用。

当你使用background快捷设置属性时，需要注意：background-color在第一个逗号后面被声明；background-size 通过 '/' 紧跟在位置属性的后面。如 center center/ 100px 100px

边界框

我们可以统一或者独立地声明边框的属性

使用border-radius使用圆角边框，可以分别调整竖直和水平方向的半径。