gradient渐变

  • linear-gradient()可以创建图像,表现为线性渐变的颜色,没有实际的大小,大小取决于应用元素的大小。
  • 所谓的线性是基于轴线定义的,该轴线以一定的角度穿过元素的中心,当你定义好轴线即渐变的方向时,在垂直于该方向上的线上,每一个点的颜色都是一样的.起点和终点附近的颜色点会和各自起点,终点的颜色一样,所谓的magic corners,神奇海螺?
    线性渐变
  • 语法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    linear-gradient( 45deg, blue, red );
    /* 指向45度角方向开始渐变,以blue开始,red结束 */
    linear-gradient( to left top, blue, red);
    /* 从右下角指向左上角开始渐变,blue开始,red结束 */
    linear-gradient( 0deg, blue, green 40%, red );
    /* 底部指向顶部开始渐变, 蓝色开始, 40%位置变为纯green,两侧渐变,以red结束*/
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    //实现彩虹一般的渐变,不写stop值就是均分位置的
  • 你应该这么写:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .grad {
    background-color: #F07575; //不支持渐变时
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /*Chrome 25, Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法*/
    低版本浏览器在实现渐变时,方向值是起点而不是终点,所以你看到是top,而不是to top。
    因为当用角度表示方向时,角度指的是终点的方向,而left等方向在低版本浏览器的实现中是起点的方向。
    所以w3c在最新的标准中,将关键字的形式规定为to direction来和角度标识的方向保持一致。
    }