边框和背景

边框 border

border-width: 设置边框的宽度。

thin medium  thick 边框宽度一次变宽。

border-style: 设置边框的样式。

1.none 没有边框
2.dashed 破折线式边框
3.dotted 圆点线式边框
4.double 双线式边框
5.groove 槽线式边框
6.inset 使元素内容具有内嵌式效果的边框
7.outset 使元素内容具有外凸效果边框
8.ridge 脊线边框
9. 实线边框

border-color: 设置边框的颜色。

• 设置一条边框的样式

border-top-width / border-top-style / border-top-color
border-top-left-radius
border-bottom-left-radius

• 将图像用作边框
  border-image-source 设置图片来源
  border-image-slice 设置切分图像的偏移
  border-image-width 设置图片边框的高
  border-image-outset 设置将边框图像向外扩展部分
  border-image-repeat 设置图像填充边框的模式

1.stretch
2.repeat
3.round
取其中一个或两个

border-image 在一条声明中设置所有值的简写属性

设置元素的背景

background-color 设置元素的背景色
background-image 设置元素的背景图像
background-repeat 设置图像的重复样式

1.repeat-x 水平方向平铺
2.repeat-y 垂直方向平铺
3.repeat 水平方向和垂直方向同时平铺 图像可能被截断
4.space 水平方向和垂直方向同时平铺 但图像与图像之间统一间距 确保图像不被截断
5.round 水平或垂直方向平铺图像，但调整图像大小，确保图像不被截断
6.no-repeat 禁止平铺图像

background-size 设置图像的尺寸

1.contain 等比例缩放图像，使其宽、高中较大者和容器重合，背景图像始终包含在容器内
2.cover 等比例缩放图像，使图像至少覆盖容器，有可能超出容器
3.auto 默认值，图像以本身尺寸完全显示

background-position 设置背景图像的位置

top / left / right / bottom / center

background-attachment 设置背景图片是否固定或随页面一起滚动

1.fixed 背景固定到视图上，内容滚动时背景不懂
2.local 背景附着在内容上，背景内容一起滚动
3.scroll 背景固定到元素上，不会随内容一起滚动

background-clip 设置背景图片的裁剪方式

1.border-box 在边框盒子内部绘制背景颜色和背景图像
2.padding-box 在内边框盒子内部绘制背景色和背景图片
3.content-box 在内容盒子内部绘制背景色和背景图像

background-origin 设置背景图像绘制的起始位置
background 简写属性

创建盒子阴影

box-shadow 为元素指定阴影
box-shadow：hoffset voffset blur spread color inset;

1.hoffset 水平偏移量
2.voffset 垂直偏移量
3.blur 指定模糊值 默认0 边界清晰
4.spread 指定阴影的眼神半径 
5.color 设置阴影的颜色
6.inset 将外部阴影设置为内部阴影

应用轮廓

边框和轮廓最大的区别：轮廓不属于页面，轮廓不需要调整页面布局。

1.outline-color 外围轮廓的颜色
2.outline-offset 设置轮廓距离元素边框边缘的偏移量
3.outline-style 设置轮廓样式 
4.outline-width 设置轮廓的宽度
outline 简写属性 color style width