你不知道的border-style border-radius background

    圆角 border-radius
    border-radius ：10px 四个圆角都圆角了,相当于 border-radius 10px 10px 10px 10px 
    border-radius:10px 20px 30px 40px 四个值的分别为：左上 右上 右下 左下
    border-radius: 10px 20px 30px 设置三个值 第一个值代表左上  中间的那个值代表右上和左下  第三个值代表右下
    border-radius: 10px 20px  设置两个值 前一个值代表左上和右下   第二个值代表右上和左下
    border-radius 10px 等于   
    border-radius：10px 10px 10px 10px  等于下面的四种写法：
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px; 等于
    border-top-left-radius: 10px 10px; 第一个值代表水平方向的偏移  第二个值代表垂直方向的偏移
    问：如何获取一个扇形？
    答：先画一个正方形，然后对border-top-left-radius: xx，xx 这两个值分别为正方形的长的时候，就可以得到一个扇形
    border-radius: 10px 20px 30px 40px  等于下面的 下面的是个性化的设置
    border-radius：10px 20px 30px 40px / 10px 20px 30px 40px    这边是水平方向的偏移量 / 这边是垂直方向的偏移量
    阴影 box-shadow
    box-shadow: inset 0px 0px 0px 0px #fff;
    第一个参数是标志着内阴影还是外阴影。不传默认外阴影
    第二个参数是阴影的水平偏移量 
    第三个参数是阴影的垂直偏移量
    第四个参数是阴影的模糊值，基于边框的原来的位置，一点点向两侧扩大，但是移不回原来的位置
    第个五参数是阴影在水平和垂直方向,也就是四个方向同时增加的大小
    box-shadow: 0px 0px 0px 0px #fff;  
    第一个参数是阴影的水平偏移量 
    第二个参数是阴影的垂直偏移量
    第三个参数是阴影的模糊值，基于边框的原来的位置，一点点向两侧模糊
    第四个参数是阴影在水平和垂直方向,也就是四个方向同时增加的大小
    box-shadow: inset 0px 0px 10px #fff,
                 5px 0px 0px 10px #f0f, 
                 0px -3px 0px 10px #f0f, 
                 -3px 0px 0px 10px #00f,
                  0px 3px 0px 10px #ff0,;
    上面代码是加了一个内阴影，四个方向分别设置不同的阴影
    边框，背景图片：
    border-image: source slice repeat 复合属性，里面有
    border-image-source: (支持渐变色,linear-gradient(red,yellow)),
    border-image-slice: 需要与上面的border-image-source来使用， 只能写数字或者百分比
    border-image-repeat: 如何平铺，有 stretch round repeat space
    border-imgage-outset: 背景图片需要多少往外延申多少
    border-image-width: 1， 设置border背景图片显示的倍数
    border-image-slice: 10 20 30 40 fill,每个参数代表分割线,分别为 ＃ 左上，右上，右下，左下进行分割, fill是填充内容区
    背景：
    background：
    backgound-image:
    1.可以填写url地址，也可以放多个url()地址,写了多少个url,
    background-size:xx xx ,xx xx 用逗号分隔，
    代表为每个图片设置大小,background-repeat:no-repeat, 
    在使用background-saize:xx xx, xx xx 
    background-size也是使用逗号分隔，可以调正图片的位置
    多url用于解决问题：如果图片因为网络问题加载不出来，使用另一个图片充当底色,一般第一张图片使用网络请求的图片，第二张图片使用本地图片
    2.也可以填写渐变 如：线性渐变 linear-gradient(), 镜像渐变 radial-gradient
    background-origin：图片从那个地方开始出现的,默认(padding-box)
     有3个值: border-box(从border开始)  padding-box（从pading开始） content-box（从content开始） 
      一般配合background-clip来使用    background-postion 定位从哪里开始，收background-origin 的影响
    background-clip:默认（border-box） 从哪个地方结束图片的显示。因为background-origin是声明了图片从哪个地方开始显示，但是没有说图片到哪个地方结束显示
    有4个值 border-box padding-box content-box text
    background-clip: text: 除了文字中显示图片外，其他地方不显示图片，只能在webkit内核下面可以使用 ，还需要使用 -webkit-text-fill-color: transparent 文字的填充颜色为背景颜色，一起配合使用才可以生效。
    background-repeat: 平铺的方式  non-repeat repeat-x repeat-y round space 
    可以填两个值 如： background-repeat: round space 水平方向round 垂直方向space 分别代表水平和垂直方式的平铺方式，不能使用  no-repeat， repeat-y ，repeat-x 不可以用于填2个值 因为这些值是默认含有两个值的属性
    background-attachment: 默认值 scroll
    有 scroll（ 相对于外容器定位，） local（相对于内容区的容器定位）  fixed(相对于视口定位，永远不动)
    background-size： 
    两个参数： cover(填满容器,会有一点repeat,) , content（图片等比例放大，不会有一点repeat）
    列如： div 500 700  
          img  100 200 
    cover img  500 1000
  content img  350 700
    lniear-gradient() 线性渐变
    linear-gradient(to right, #0f0 20px, #ff0 60px) 
    第一个参数： 线性渐变的方向， 如朝右 to right ,朝上 to top ,超右上 to right top, 0deg 朝上 ，90deg 超右
    后面颜色的像素是： 从20px - 60px 都是用#0f0 与#ff0 的过渡， 如果60px后面没有其他颜色的话就还是#ff0，就是最后一个颜色
    radial-gradient() 镜像渐变
    radial-gradient(circle at right,#0f0 20px, green 100px)
    参数：第一个参数 circle （代表圆， at 后面是用于设置圆心 ） ellipse（椭圆， at 后面用于设置圆心） 
         20px 是以圆心，半径为20px向外放射 可以使用百分比
         circle ellipse 后面可以设置放射半径 有下面四个值：
         closest-corner: 最近的角落
         closest-side: 最近的边
         farthest-corner: 最远的角落
         farthest-side: 最远的边