• CSS3渐变的背景色


    我们在开发的过程中经常会遇到背景色是渐变的背景色,一般可以制作背景图,如果仅仅是简单的线性变换的背景,今天我就遇到了,其实完全可以用CSS3的渐变来实现这个效果。这个过程由浏览器来生成,不用去加载静态的资源,提高性能。

    渐变有两种:

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

    线性渐变也是比较常见的渐变方式

    为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

     基础的语法就是这样的: 

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

    默认的是从上到下的加入你不设置方向的话

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

    从左到右

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

    从左上角到右下角

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

    还有一种是带有角度的自定义的渐变

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

    当然还有多个颜色的渐变

    #grad {
      /* 标准的语法 */
      background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    }

    CSS3的渐变还支持带有透明度的写法

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

    重复的线性变化(其实这个也有的地方用到)

    #grad {
      /* 标准的语法 */
      background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

    下面的是径向渐变

    emmmmmmm我不用我也不想写,哈哈哈哈

    就写一个基础的用法吧!!!

    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
     
  • 相关阅读:
    20145220&20145209&20145309信息安全系统设计基础实验报告
    20145209 《信息安全系统设计基础》第8周学习总结
    R574
    gym102219
    102222F
    luogu 1337
    luogu 2503 & bzoj 2428
    18 BJ J
    poj 1981
    101992 I
  • 原文地址:https://www.cnblogs.com/dongdong1996/p/13371302.html
Copyright © 2020-2023  润新知