• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <gradient>

    版本:CSS3

    <gradient>是一种<image> CSS数据类型的子类型,用于表现两种或多种颜色的过渡转变。<gradient>没有内在尺寸;即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元素的大小。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持<gradient>数据类型

    <gradient>数据类型

    线形渐变

    颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient()产生。

    .linear-gradient {
      background: linear-gradient(to right,red, orange, yellow, green, blue, indigo, violet);
    }
    

    径向渐变

    颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。由radial-gradient()产生。

    .radial-gradient {
      background: radial-gradient(red, yellow, rgb(30, 144, 255));
    }
    

    重复渐变

    重复多次渐变图案直到足够填满指定元素。由repeating-linear-gradient()repeating-radial-gradient()函数产生。

    .linear-repeat {
      background: repeating-linear-gradient(to top left,
          lightpink, lightpink 5px, white 5px, white 10px);
    }
    
    .radial-repeat {
      background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
    }
    

    插值

    与其他的颜色插值一样,颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。(在使用transparent keyword时,敬请注意一些没有使用这种计算方式的旧浏览器。)