边框属性
作用：给元素加上一个边框
第一种：border-top, border-bottom, border-left, boder-right,
三个属性，粗细，线型，颜色
第二种：border ：粗细 线型 颜色
透明颜色：trantransparent
轮廓
作用：绘制与元素周围的一条线，位于外边框外
属性：粗细 线型 颜色
outline-width: 20px; outline-style: solid; outline-color: red;
我们很多时候都会碰到文本框（input）就算去除边框也会在点击之后会有蓝色的边框出现，我们在这里用outline:none这个样式，我们就会将蓝色边框给去除
元素的分类
块级元素：独占一行，对宽高设置有效，如果我们不给宽度的话，撑满整行，如果不给高度，高度会随着内容的变化而变化
行内元素：设置宽高是无效的，不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
行内块元素：不是独占一行，设置宽高有效，并且可以多个标签存在一行。
可以使用 display 来改变元素的分类
盒子模型
组成： 内容 内边距 边框 外边距
边框：border
内边距：padding 边框和内容之间的距离
padding 存在一个值 上下左右都是改值
存在两个值 上下一个值 左右一个值
存在三个值 上 左右 下
存在四个值 上右下左
可以单独的去设置 例如 padding-top
外边距：margin 元素和元素之间的距离
背景属性
分类：纯色背景（背景颜色） 背景图像
1.背景颜色
background-color ： 任意合法的颜色 和 transparent
2.背景图像
background-image ： url（）
3.背景图像平铺
background-repeat：
1.repeat ： 默认值水平垂直方向都平铺
2.repeat-x：水平方向平铺
3.repeat-y：垂直方向平铺
4.no-repeat： 不平铺
4.背景图片的尺寸
background-size： value1 value2 宽度 和 高度 单位 是PX
value% value% 宽度 和 高度 单位 是%
cover : 全覆盖 将背景图等比放大直到背景图完全覆盖到元素的所有区域
contain：包含 将背景图等比放大 ，直到下边或者右边有一个边缘碰到元素为止
5.背景图片固定
background-attachment: fixed;
scroll：滚动 fixed 固定
6.背景定位
改变背景图像在元素中的默认位置
属性 ： background-position
x y 水平偏移距离 和垂直偏移距离
单位 ： px % top left right bottom
7.CSS中的 雪碧图、精灵图
作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。
步骤：
1.我们根据图像的大小创建一个元素
2.将雪碧图作为元素的背景，再通过背景图片定位，实现位置偏移将用户要看到的图像显示在元素中
渐变
渐变是两种或者多种颜色间平滑度过的效果
分类：
1.线型渐变
2.径向渐变
3.重复渐变 加上 repeating
2.渐变的组成
色标：决定了渐变的每种颜色及出现的位置
每个渐变效果都是由多个色标组成（2个以上）
语法：background-image：linear-gradient（方向或者角度，色标。。。。。）
linear-gradient() 线型渐变
angle 方向或者角度
to top 从下往上填充
to left 从右往左
to right 从左往右
to bottom 从上到下
0 == 0deg（度） ==to top
90deg = toright
180deg = to bottom
270deg = to left
color 颜色
/*径向渐变
size at position 径向渐变的位置以及圆心的位置
size ： 圆的半径 单位为px
position ： x，y 圆心的位置
px % top/left/center/bottom
色标
background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);
