CSS中添加背景图+盒子边框样式

background-image背景图

*设置图片为背景。*

background-image:url("图片路径")；

background-size

:设置背景图片的大小
属性值：px 单词

单词：
都会让图片等比例缩放。
cover 将盒子铺满背景图，但是不保证图片的完整显示。

contain 将图片完整的显示，不保证铺满盒子。

background-repeat

设置背景图片是否重复以及如何重复，默认为平铺满。
属性值：
repeat:平铺 默认值

no-repeat:不平铺

background-position

规定插入的背景图在盒子中的位置。
默认从左上角开始显示背景图。
1.像素
background-position: 水平偏移量（正向右） 垂直偏移量（正向下）;

2.百分比
图片在左上角是 0% 0%
图片在右下角是100% 100%
代表的像素值：（盒子的宽/高-图片本身的宽/高）*百分比
也可以为负数。

3.单词
top
bottom
center
left
right

如果只有一个值，默认另外一个值为50%

应用场景：
1.网页的背景图
2.通栏banner
3.精灵图/雪碧图（音译）
提高网页的响应速度，减少服务器的压力。

background-attachment

设置图片是否随着页面的滚动而滚动

属性值：
fixed：背景会被固定，不会随滚动条滚动

scroll 默认属性，会随滚动条滚动。

background-origin背景图完整显示位置

背景原点
padding-box 从内边距开始显示背景 默认值

border-box 从边框开始显示背景

content-box 从内容开始显示背景

background-clip

背景裁切
border-box 默认值 超过边框部分的背景，将被裁剪掉。
padding-box 超过padding部分的背景，将被裁剪掉。
content-box 超过内容部分的背景，将被裁剪掉。

线性渐变

格式：
background-img:liner-gradient(方向,起始颜色…终止颜色);

方向：to left,to right,to top,to bottom

background-img:liner-gradient(方向,起始颜色20%…终止颜色60%);

颜色突变

角度 deg

径向渐变

background-img：radial-gradient(辐射的半径大小 中心的位置，起始颜色，…终止颜色);

中心的位置：
单词
at center
at left
at top
at right
at bottom

   px
       按照左上角进行位移

盒子边框样式

边框圆角 border-radis

属性值：px 百分比
border-radis：水平半径 垂直半径
border-radis:10px;
以10px为半径，画圆，以得到的弧度为边角。

可以按照四个角来设置：
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

border-radius: 左上 右上 右下 左下;
省略的角度，取对角的值。

半径写法：
border-radius: 150px/200px; 水平半径/垂直半径

半圆：
1.矩形
2.宽是高的2倍。
3.左上右上圆的半径为宽的一半。

盒子阴影 box-shadow

格式： box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影（inset）/外阴影（为空，没有值）

text-shadow 文本阴影

格式：
text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;