13_CSS3过渡&动画

一、线性渐变的使用

CSS3中的线性渐变:表示从一个边到另外一个边

一.属性:background
二.属性值:linear-gradient(参数)
三:参数的使用

1. 参数1:表示方向值
2. 参数2:表示颜色值
3. 参数3:表示颜色值

四.注意点

1. 在线性渐变的参数中多个参数之间需要用逗号隔开
2. 默认的方向是从上到下的

五.关于线性渐变中参数以及兼容写法

            标准写法                       兼容写法
属性       background                     background
属性值     linear-gradient         -浏览器前缀-linear-gradient
方向1      to 结束的方向值            不加to 开始的方向值
方向2      to 结束的对角              不加to 开始的对角
方向3      deg                       90-标准写法的角度值

<style>
    /* 标准写法 */
    div{
        width: 300px;
        height: 300px;
        background: linear-gradient(30deg,red,green,yellow,yellowgreen,blue,skyblue)
    }
    /* 兼容写法 */
    h1{
        width: 300px;
        height: 300px;
        background: -webkit-linear-gradient(60deg,red,green