• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 位置: css3教程 -> css3样式

    css3渐变

    渐变

    在两个或者多个指定的颜色之间显示平稳的过渡。渐变的效果是由浏览器生成的。渐变的类型主要分为两种:linear-gradient(线性渐变)和radial-gradient(径向渐变)

    线性渐变是一个向上、向下、向左、向右或者对角方向的渐变,而径向渐变则是由它们的中心定义。

    应用在所有接受图像的属性上(background-image 或者 background)。


    linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

    说明:
    允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。渐变在一个拥有尺寸的盒子中被生成,被称之为渐变盒,但是渐变本身并没有内在的尺寸,也就说如果在一个没有尺寸的容器上定义渐变,将无法被呈现。


    linear-gradient(线性渐变)

    预防方式,使用方向,使用角度。

    一、使用方向(direction)

    background: linear-gradient(direction, color1, color2, ...);

    direction(渐变方向)属性。在不添加角度和方向的前提下,默认是从上到下,可以简写为,background: linear-gradient(color1, color2);

    1、单方向渐变

    to right 从左到右,进行颜色渐变
    to left 从右到左,进行颜色渐变
    to bottom 从上到下,进行颜色渐变
    to top 下到上,进颜色从行渐变

    例如颜色从左到右渐变。初始颜色为#147B96,结束颜色为#E6D205:

    background:linear-gradient(to right,#147b96,#e6d205);
    


    2、对角(需要把两个方向相结合)

    to right bottom
    to right top
    to left bottom
    to left top

    例如渐变颜色是,从下到下,从左到右。初始颜色为#147B96,结束颜色为#E6D205:

    background:linear-gradient(to bottom right,#147b96,#e6d205);
    


    二、使用角度(angle)

    background: linear-gradient(angle, color1, color2, ...);

    举例:

    background: linear-gradient(45deg, #147b96 , transparent);
    


    多种颜色

    background: linear-gradient(to right, #147b96, #e6d205 25%, #147b96 50%, #e6d205 75%, #147b96);
    background: linear-gradient(to right, #147b96, #e6d205 50px, #147b96 50px, #e6d205 50px, #147b96);
    


    重复渐变

    background: repeating-linear-gradient(to right, #147b96, #e6d205 5%, #147b96 10%, #e6d205 20%);
    


    声明多个 - 逗号分隔 - 最先声明优先级最高

    background: linear-gradient(green 10px, transparent 10px),
    linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
    linear-gradient(transparent 40px, green 4px);
    


    radial-gradient(径向渐变)

    基本语法

    background: radial-gradient(center, shape size, start-color, ..., last-color);
    

    渐变中心,整个图形的中心点,既可以使用px,也可以使用%。

    background-image: radial-gradient(0% 0%, red, green, blue);
    

    渐变形状,主要是有两种:circle(圆形)和ellipse(椭圆形)

    background:radial-gradient(circle, red, green, blue);
    

    渐变大小

    closest-side- 渐变的半径长度为从圆心到离圆心最近的边

    closest-corner- 渐变的半径长度为从圆心到离圆心最近的角

    farthest-side- 渐变的半径长度为从圆心到离圆心最远的边

    farthest-corner- 渐变的半径长度为从圆心到离圆心最远的角

    background:radial-gradient(circle at farthest-corner, red, green, blue);
    

    渐变中心、渐变形状和渐变大小这三个就是径向渐变的主要使用,除此之外,也可以和线性渐变一样使用多种颜色,重复渐变以及声明多个渐变。


    浏览器的支持情况

    因为它是一个比较新的属性,所以它在浏览器中使用时需要添加它的前缀

    不同厂商的浏览器的前缀也是不一样的,比如:

    .header {
      /* safari */
      background: -webkit-linear-gradient(red, blue);
      /* opera */
      background: -o-linear-gradient(red, blue);
      /* firefox */
      background: -moz-linear-gradient(red, blue);
      /* 标准的语法, 放在最后 */
      background: linear-gradient(red, blue);
    }
    

    不同的浏览器厂商在实现这个标准时也是略有不同的,比如关于方向的定义,角度的定义,是顺时针还是逆时针。