border&background

border: 20px solid transparent; （transparent 透明度）
border-color: currentColor; 属性color == 属性border-color(在没有设置bordercolor的前提下)
border-radius(半径)
border-radius: 10px;
border-radius: 10px 20px 30px 40px;
border-top-left-radius: 10px; 相当于 10px，10px
border-top-right-radius:20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;

box-shadow：给盒子加上阴影的（外阴影、内阴影）。默认外阴影：outset（外） inset（内）；
四个参数（水平偏移量(+ r; - l) 垂直偏移量(+ up; - down) 阴影模糊的范围传播的距离（可写可不写(添加阴影宽度) ））
box-shadow: inset 10px 10px 10px 0px #fff;
box-shadow: inset 10px 10px 10px 0px #fff,
3px 0px 10px 0px #f0f,紫色
0px -3px 10px 0px #0ff,蓝色 紫色在蓝色最上面

border-image :
border-image: source slice repeat;
border-image : url() slice repeat
border-image-source : url() 也支持渐变色 linear-gradient( 颜色1， 颜色2)
border-image-slice ：10 10 10 10 这里面只能填数字或者百分比，也是代表像素 ；在后面也可以填写fill，用于填充里面内容，一般不用；分割图片
border-image-width ：1；设置能显示图片背景的宽度；默认值是1 ；一般不动；auto的时候，会把slice的值+px赋给自己；不常用
border-image-outset ：让背景图片往外延伸（只能正值）不常用
border-image-repeat：(可以添加两个参数)stretch；默认值拉伸；
repeat/round（它是先拉伸到一定程度就添加重复图片），重复；
space：先拿一个凑合着，然后空白到一定的程度的时候，拿空白区，填充

background:
background-image:（可以写多个背景图片）** url(图片地址);
linear-gradient()线性
radial-gradient()镜像 渐变颜色生成器
background-size：100px 200px , 100px 200px;设置图片大小（可以设置两张）
background-repeat：no-repeat；不重复
background-position: **0 0； 100px 0; ( 百分号||数字||方向值( cneter ) )如果第一个值是0 第二个值不写默认的是center；

background-origin: 图片是在哪里开始的；设置了图片从哪里开始，但是没有规定从哪里结束；从左上角开始，
border-box；
padding-box；（默认值，左上角的padding开始）
content-box；
background-position：50px 50px;(你的origin是谁，就相对于谁的左顶点开始进行定位，这时候就是以padding-box开始的)
background-clip：四个值 border-box默认值 ；padding-box ；content-box ；text；分别和background-origin配合的；
设置的是背景图片从哪块开始截断，然后打哪块开始以外的部分都不显示背景图片。
如果我设置了padding-box的话，就代表背景图片以padding以外开始截止，那么border以外一圈都不会显示；用的几率比较小；
设置text的时候，只会把文字设置上背景图片，只在-webkit-background-clip: text; background-clip: text; 好使，要配合-webkit-text-fill-color: transparent; text-fill-color: tansparent;是webkit私有化的属性。
backround-size: 20px 20px；
cover和contain 尽量先将一条边与图片的一条边对齐，改变图片的比例；
contain的另一条边 <= 容器的另一条的大小 ； cover另一条边是 >= 容器另一条边的大小
cover：用一张图片填充背景。在不改变原始比例前提下，用一张图片把填充满这个容器，哪怕这个图片大到超出这个容器了；
contain：用一张图片填充背景，在不改变原有的比例前提下，让容器包含一张完整的图片，即便是有repeat出现。
bcckground-repeat:
no-repeat;我们的属性设置了 no-repeat值之后，我们背景图片填充不到的地方，我们就不拿repeat来给它重复平铺；
repeat-x; x轴，平铺（相当于俩值）
repeat-y；y轴，平铺（相当于俩值）
round；拉伸到能够添加图片的时候添加图片，或者压缩图片来添加图片
space；拿空白来填充，不会改变图片大小
round space；x轴是round，y轴是space；
background-attachment：改变它的定位属性的；默认值：scroll（相对于容器进行定位，像posiiton: fix；相对于视口定位；）；
local；相对于容器内的内容进行定位；像posiiton: absolute；相对于视口定位；
fix；相对于真正的可视区视口进行定位。不常用
收边工作：
background-image：
linear-gradient( 方向(to right || to top right || 0deg:0度（从下往上）|| 90deg(从左向右))，
颜色1 像素距离(颜色完全填充的距离)， 颜色2 )
radial-gradient(圆心位置( cicle(圆，椭圆…) at 100px 0px || right bottom)， 颜色1， 颜色2， #f00 ) 放射性渐变的一个值;
圆后面可以跟半径的值 cicle closest-corner
closest-side
farthest-corner(最远的角落)
farthest-side (最远的边）
repeating-linear-gradient(方向，颜色1，颜色2）；创建一个由重复线性渐变组成的， 这是一个类似linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器.
repeating-radial-gradient( 方向， 颜色1，颜色2 )；创建一个从原点辐射的重复渐变组成的，它类似于radial-gradient并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。