第十九章 使用边框和背景

CSS中的边框和背景

这个章节主要介绍CSS中的边框和背景，先学习这个的目的是为了后续学习padding内边距和margin外边距时更加的容易。

border-width/style/color边框的基本属性

• border-width边框的宽度
• border-style边框的样式
• border-color边框的颜色

border-width的边框宽度值的单位有em、px、cm，以及内置的大小Thin、medium、thick。 border-style边框的样式无边框none、破折线边框dashed、点边框dotted、实线边框solid。 border进行简写 宽度、样式、颜色的方式设置边框。中间使用空格隔开。

    border: medium solid black;

还可以对单独某一个边框进行设计 border-top、border-right、border-bottom、border-left、 设置圆角：border-radius、border-bottom-right-radius，拥有两个值，第一个值代表水平圆角半径，第二个值代表平行圆角半径。

background-xxx--元素的背景

• background-color背景颜色。值为颜色
• background-image背景图片。值为URL
• background-repeat图片重复的样式。值有repeat-x、repeat-y、repeat、space、round、no-repeat
• background-size背景图片的尺寸。值为宽、高
• background-position背景图像的位置。值为top、bottom、left、right、center或指定位置。
• background-attachment图像是否跟着页面一起滚动。值为fixed固定到视窗上，不滚动；scroll固定到元素，不滚动；local随内容一起滚动。
• background-origin图像绘制的起点。值为border-box、padding-box、content-box表示背景图片开始绘制的地点。
• background-clip图像剪切方式。值为border-box、padding-box、content-box表示背景图片会从哪开始剪切。
• background简写属性

shadow--创建盒子阴影

box-shadow的值有很多，hoffset、voffset、blur、spread、color、inset

• hoffset阴影的水平偏移
• voffset阴影的垂直偏移
• blur阴影的模糊情况
• spread阴影的扩散情况
• color阴影的颜色
• inset阴影的位置是在盒子内部还是外部

outline-xxx--轮廓

• outline-color轮廓的颜色
• outline-offset轮廓的距离元素的偏移量
• outline-style轮廓的样式，和border一致
• outline-width轮廓的宽度