渐变的本质： 绘制一张背景图片，所以使用 background 或者 background-image

background 的诸多属性，渐变都是可以使用的（repeat，position）

百分比： 把元素渐变方向的整体长度看成 100%

线性渐变背景

  • 使用：    （至少三个参数，从第二个参数开始，都是颜色）
  • background-image: linear-gradient( 方向    开始颜色    结束颜色);
  • 方向

    • 默认值（从上到下）

      • background-image: linear-gradient(#000, #fff);
    • to right    到右 
      • background-image: linear-gradient(to right, #000, #fff);
        
background-image: linear-gradient(to left, #000, #fff);
        
background-image: linear-gradient(to top, #000, #fff);
        
background-image: linear-gradient(to bottom, #000, #fff);
    • to right bottom    到右下角 
      • background-image: linear-gradient(to right bottom, #000, #fff);
        
background-image: linear-gradient(to right top, #000, #fff);
        
background-image: linear-gradient(to left top, #000, #fff);
        
background-image: linear-gradient(to left bottom, #000, #fff);
    • 角度 deg 
      • background-image: linear-gradient(0deg, #000, #fff);
        
background-image: linear-gradient(90deg, #000, #fff);
        
background-image: linear-gradient(180deg, #000, #fff);
        
background-image: linear-gradient(270deg, #000, #fff);

background-image: linear-gradient(45deg, #000, #fff);
        
background-image: linear-gradient(135deg, #000, #fff);
        
background-image: linear-gradient(225deg, #000, #fff);
        
background-image: linear-gradient(315deg, #000, #fff);

background-image: linear-gradient(-45deg #000, #fff);
        
background-image: linear-gradient(-90deg #000, #fff);
  • 颜色结点 
    • background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%);

/*
      
从 0% 到 10% 为 red
      
从 10% 到 20% 为 red 到 green 的渐变
      
从 20% 到 30% 为 green 到 blue 的渐变
      
从 30% 到 40% 为 blue 到 yellow 的渐变
      
从 40% 到 100% 为 yellow 

最后一个颜色百分比不写，默认到 100%
      
第一个颜色百分比不写，默认 0%
      
*/
  • 应用： 45 度红白格（马赛克地砖）    
  • 明确的 颜色分割线（red 25%, white 25%）
  • 多重渐变背景，以逗号隔开，适当位置设置透明颜色
    • 123

重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);

  • 颜色结点，除了可以写百分值，还可以写一个具体的像素值。写像素值，必须写两个值：起始和结束。

    • background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px;    // 发廊灯
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title></title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            #outer_box {
    
                width: 100px;
    
                height: 300px;
    
                margin: 300px auto 0;

                overflow: hidden
    
            }

            #inner_box {
    
                width: 100px;
    
                height: 3000px;
    
                margin-top: -900px;

                background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
    
            }

            #inner_box:hover {
    
                margin-top: 0px;
    
                transition: 9s;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="outer_box">
    
            <div id="inner_box">
    
            </div>
    
        </div>

    </body>
    
</html>
  • 文字光斑 动画
  • 文字要设置透明 color: rgba(255, 255, 255, 0.3);
  • 3

径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);

从起点到终点，颜色从内向外渐变。

  • 形状尺寸 参数
  • circle 默认形状，圆形
  • 当 width 相等 height 时，总是圆形
  • 当 width ！= height 时，是椭圆
  • 颜色结点
  • 百分比，参照圆心到最远端的距离
  • 尺寸大小

    • closest-side circle    最近边
    • farthest-side circle    最远边
    • closest-corner    最近角
    • farthest-corner    最远角
  • at 设置圆心

    • background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
    • background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
  • 重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);

    • background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);

CSS3_线性渐变_径向渐变----背景的更多相关文章

  1. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  2. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  3. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

  4. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  5. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  6. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  7. css3渐变之径向渐变

    径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...

  8. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  9. CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...

随机推荐

  1. Spark源码剖析 - SparkContext的初始化(一)

    1. SparkContext概述 注意:SparkContext的初始化剖析是基于Spark2.1.0版本的 Spark Driver用于提交用户应用程序,实际可以看作Spark的客户端.了解Spa ...

  2. [物理学与PDEs]第4章第2节 反应流体力学方程组 2.1 粘性热传导反应流体力学方程组

    1.  记号: $Z=Z(t,{\bf x})$ 表示未燃气体在微团中所占的百分比 ($Z=1$ 表示完全未燃烧; $Z=0$ 表示完全燃烧). 2.  物理化学 (1)  燃烧过程中, 通过化学反应 ...

  3. Java Swing实现一个简单而优美的记事本( 较详细注释 )

    Java Swing实现具有基本功能的记事本 目前实现了: 文件 新建 打开 保存 退出前保存询问 编辑 剪切 复制 粘贴 清除 撤销 格式 字体选择 字体颜色选择 帮助 关于 (样式采用了css与h ...

  4. Angular7_人员登记系统

    1.ts public peopleInfo: any = { username: 'kxy', sex: '男', cityList: ['汕头', '广州', '茂名'], city: '汕头', ...

  5. Alpha 冲刺 （9/10）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之9 团队部分 后敬甲(组长) 过去两天完成了哪些任务 答辩准备中 和大佬们跟进进度 接下来的计划 准备答辩 ...

  6. python excel的操作

    1.在测试用例中生成的数据报错到已存在的excel里面 1 import xlrd 2 from xlutils.copy import copy 3 class test: 4 def write_ ...

  7. Easy RM to MP3 Converter栈溢出定位及漏洞利用

    本文主要是Easy RM to MP3 Converter(MFC++编写)栈溢出的定位及windows下shellcode编写的一些心得. 用到的工具及漏洞程序下载地址https://github. ...

  8. C# 最牛逼的Utility工具类

    完整代码: using System; using System.Collections.Specialized; using System.IO; using System.Net; using S ...

  9. Android Studio项目Gradle内网配置

    由于内网无法连接到外部网络,在使用Gradle编译Android Studio项目时就会面临一些问题: 1.Gradle安装文件无法下载 2.Gradle Android插件无法下载 3.项目依赖文件 ...

  10. Windows Internals 笔记——终止进程

    1.进程可以通过以下四种方式终止: 主线程的入口点函数返回(强烈推荐的方式) 进程中的一个线程调用ExitProcess函数(避免这种方式) 另一个进程中的线程调用TerminateProcess函数 ...