背景-background属性

background-origin 设置背景图渲染的起始位置

        值  

            padding-box 默认值，从padding位置开始渲染

            contnt-box 从内容部分开始渲染

            border-box 从border开始渲染

background-size 设置背景图片的填充方式，也就是设置背景图的大小

        值

            cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片

            contain 以最长边为基础渲染图片，短边按比例缩放

        值还可以是以下写法

            background-size：宽度 高度；

            如果只写一个宽度，高度按比例渲染

            宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

背景蒙版 mask

        1.最初只有 谷歌浏览器支持

        2.背景蒙版可以把 透明图的透明部分渲染为不透明，把不透明的部分渲染为透明

        3.他的设置方式和背景图的设置一致

        浏览器前缀

        -webkit- ：是谷歌、苹果浏览器内核的前缀

        -moz-  :是火狐浏览器内核的前缀

        -ms- ： 是IE浏览器内核的前缀

        -O- ：欧朋浏览器内核的前缀

        在css属性名之前添加 浏览器前缀，表示该css属性是浏览器的私有属性

.wp{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            -webkit-mask: url(../images/logo.png) no-repeat center center;
            background: #04be02;
            -webkit-mask-size:100% 100%;
        }

box-shadow 设置阴影

        box-shadow:x方向的偏移量 y方向的偏移量 阴影的发散度（模糊度） 阴影的宽度 阴影的颜色[阴影位置]

        inset 设置内阴影

        box-shadow: 10px 10px 20px 0 #ff0 inset

        设置多组阴影，使用逗号隔开，设置的方式一样

        注意：在元素上设置阴影，通常是为了增强元素的立体感，阴影不占据文档流空间，因此不会引起元素盒模型的变化

.wp,.wp2,.wp3,.wp4{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 50px auto;
            box-shadow: 10px 10px 10px 0px #f60 inset;
        }
        .wp2{
            background: #ff0;
            border-radius: 50%;
            box-shadow: 0 0 50px 10px #f00 ;
        }
        .wp3{
            box-shadow: 0 0 50px 2px #f60  inset;
        }
        .wp4{
            box-shadow: 10px 0 0px 0px #f00,-10px 0 0px 0px #f0f,0 -10px  0px 0px #ff0 ,0 10px 0 0 #04be02;
        }

渐变

渐变，至少IE10支持

       渐变也是背景图的一种

        1.线性渐变

        background: linear-gradient(to 方向，颜色 开始渐变的位置，颜色 开始渐变的位置，...);

        linear-gradient 里面的参数

        1. to 方向，方向可以使用具体的方向单词，可以使用角度度数

            如果是度数，直接写具体角度，不需要加to

            正值：顺时针旋转

                0->向上

                90->向右

                180->向下

                270->向左

            负值：逆时针旋转

            开始简便的位置可以是具体的数值，也可以是百分比

        1.线性渐变

        2.径向渐变

.wp{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: linear-gradient(215deg,#f0f 0%,#f00 30%,#ff0 60%,#04be02 100%);
        }
        .wp1{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: linear-gradient(to bottom,#000 0%,#000 33.3%,#f00 33.3%,#f00 66.6%,#ff0 66.6%,#ff0 100%);
        }
        .gre{
            width: 400px;
            height: 300px;
            border: 1px #04be02 solid;
            margin: 10px auto;
            background: linear-gradient(to bottom,#000 0%,#000 33.33%,#f00 33.33%,#f00 66.66%,#ff0 66.66%,#ff0 100%) no-repeat;
            background-size: 40px 30px;
        }
        .case{
            height: 100px;
            background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #04be02 20%, #04be02 100%);
            background-size: 50px 50px ;
        }
        .case1{
            /* width: 500px; */
            height: 100px;
            border: #000 1px solid;
            margin: 0 auto;
            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #04be02 20%, #04be02 30%,rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%,#04be02 50%, #04be02 60%,rgba(0,0,0,0) 60%, rgba(0,0,0,0) 80%,#04be02 80%, #04be02 90%,rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%) repeat-x 0 center;
            background-size: 100px 30px ;
        }
        .case1{
            height: 100px;
            border: #000 1px solid;
            margin: 0 auto;
            background: #000 linear-gradient(#fff 0,#fff 50px ,tran);
        }

2.径向渐变

radial-gradient 设置径向渐变

        radial-gradient（半径 形状 at 圆心，颜色 渐变的开始位置，颜色  渐变的开始位置......）

        形状的可选值：

            1.circle 圆形，默认值，可以省略

            2.ellipse

       

        半径可以是具体的数值，也可以是如下系统给定的值：

        farthest-corner 最远角

        closest-corner 最近角

        farthest-side 最远边

        closest-side 最近边

        圆心的设置

            1.可以是具体的数值，第一个数值代表水平（X轴）方向，第二个值代表垂直（Y轴）方向

            2.可以是 left top right bottom center 等方向名词的组合

        渐变开始的位置

        1.可以是具体的数值

        2.可以是百分比，百分比是以半径长度为基准

.wp,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: radial-gradient(100px circle at 100px 100px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp2{
            background: radial-gradient(100px  at 100px 100px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp3{
            background: radial-gradient(farthest-corner  at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp4{
            background: radial-gradient(closest-corner  at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp5{
            background: radial-gradient(farthest-side  at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp6{
            background: radial-gradient(closest-side  at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
        }
        .wp7{
            background: radial-gradient(50px  at right center, #f00 0%,#0f0 50%,#ff0 100%);
        }