渐变以及选择器

2017-09-14 本文已影响0人 likeli

渐变

默认写法，不加前缀，要在方向前面加to，顺序从右向左
兼容写法，不能在方向前加to，顺序是从左向右
background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表蓝绿过渡效果在50到80之间
repeating代表是重复的
当设置度数时background: linear-gradient(0deg,blue,green,red); 默认从下往上
background: -webkit-linear-gradient(0deg,blue,green,red);默认从左往右
当什么都不设置的话，加不加前缀都是从上往下
以下是代码及运行结果
.item{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
color: white;
text-align: center;
font-size: 50px;
line-height: 200px;
```
  }
```

.item1{
background: linear-gradient(blue,green,red);
}

5F9DABB3-65B4-48ED-8B9F-2DE582705A86.png

    .item2{
        background: -webkit-linear-gradient(blue,green,red);
    }

2037120D-4770-4DCE-9281-88338E951F36.png

    .item4{
        background: -webkit-linear-gradient(top left,blue,green,red);
    }

F8825C8E-B07E-4C56-A6C6-D3D99393D824.png

    .item3{
        background: -webkit-repeating-linear-gradient(0deg ,blue 70px,green 80px,red 90px);
    }

120438D8-382E-4A26-A7D7-A1B5D5944CAB.png

不能确定角度，圆的旋转无意义100px代表半径
可以指定方向，如top
在长方形内，径向渐变是椭圆，可以添加circle属性变成圆形
其他和线性渐变类似
以下是例子
.item5{
background: -webkit-radial-gradient( red 30px,orange 40px,yellow 50px,green 60px,cyan 70px,blue 80px,purple 90px)
}

3644FEB8-BA70-421A-8448-BC628CB1C3C8.png

    .item6{
        background: -webkit-radial-gradient(top, red 30px,orange 40px,yellow 50px)
    }

D7BF9B8D-692C-4107-BDEB-6C56700C2220.png

    .item7{
        background: -webkit-repeating-radial-gradient( red 30px,orange 40px)
    }

E91BAC9C-9D0C-4211-9D04-B7AE8984E0EE.png

    .item8{
        width: 420px;
        background: -webkit-repeating-radial-gradient(circle, red 30px,orange 40px)
    }

E8421EE8-E87C-4C11-B515-8716A0FE8F27.png

    .item9{
        /* width: 420px; */
        background: -webkit-radial-gradient(circle, red 70%,orange 71%)
    }

D21A0F4B-F3A4-47B9-8911-47A14D876CE6.png

div>p 子代选择器选择的是直接子集，如例所示：选择的是p标签，父级是div的p的标签

div+p 兄弟毗邻选择器，紧跟在div后面的p标签，中间不能有其他标签

div ~p 跟在div后面的所有p标签，同级