zoukankan      html  css  js  c++  java
  • css渐变

    css渐变

    1、定义

    CSS3渐变(gradients)是在两个或多个指定的颜色之间显示平稳的过渡。

    2、分类

    线性渐变(LinearGradients)-向下/向上/向左/向右/对角方向
    径向渐变(cGradients)-由它们的中心定义

    3、线性渐变

    设置一个起点和一个方向(或一个角度)

    (1)从上到下
    起点是红色,慢慢过渡到蓝色:

    #grad{
        background-image:linear-gradient(#e66465,#9198e5);
    }
    

    (2)、从左到右
    起点是红色,慢慢过渡到蓝色:

    #grad{
        height:200px;
        background-image:linear-gradient(toright,red,yellow);
    }
    

    (3)对角

    从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

    #grad{
        height:200px;
        background-image:linear-gradient(to bottom right,red,yellow);
    }
    

    (4)对角使用多个颜色结点
    带有多个颜色结点的从上到下的线性渐变:

    #grad{
        background-image:linear-gradient(red,yellow,green);
    }
    

    (5)使用透明度(transparent)

    从左到右的线性渐变,带有透明度:

    #grad{
        background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));
    }
    

    4、径向渐变

    径向渐变由它的中心定义。至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)。

    (1)、颜色结点均匀分布(默认情况下)

    #grad{
        background-image:radial-gradient(red,yellow,green);
    }
    

    (2)、颜色结点不均匀分布

    #grad{
        background-image:radial-gradient(red5%,yellow15%,green60%);
    }
    

    (3)、设置形状
    shape参数定义了形状。它可以是值circle或ellipse。其中,circle表示圆形,
    ellipse表示椭圆形。默认值是ellipse。

    #grad{
        background-image:radial-gradient(circle,red,yellow,green);
    }
    

      

  • 相关阅读:
    (转)A*算法详解及习题
    BZOJ1444[Jsoi2009]有趣的游戏——AC自动机+概率DP+矩阵乘法
    交通——set+dsu on tree
    [Codeforces1132G]Greedy Subsequences——线段树+单调栈
    BZOJ4482[Jsoi2015]套娃——贪心+set
    BZOJ4477[Jsoi2015]字符串树——可持久化trie树
    BZOJ4475[Jsoi2015]子集选取——递推(结论题)
    [UOJ86]mx的组合数——NTT+数位DP+原根与指标+卢卡斯定理
    BZOJ2428[HAOI2006]均分数据——模拟退火
    BZOJ4712洪水——动态DP+树链剖分+线段树
  • 原文地址:https://www.cnblogs.com/wenaq/p/13533664.html
Copyright © 2011-2022 走看看