用线性渐变创建图像。

  • 如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现。
  • 示例代码:
    linear-gradient(#fff, #333);
    linear-gradient(to bottom, #fff, #333);
    linear-gradient(to top, #333, #fff);
    linear-gradient(180deg, #fff, #333);
    linear-gradient(to bottom, #fff 0%, #333 100%);
  • demo代码:
    • <!DOCTYPE html>
      <html lang="zh-cmn-Hans">
      <head>
      <meta charset="utf-8" />
      <title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
      <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
      <style>
      div {
      width: 200px;
      height: 100px;
      margin-top: 10px;
      border: 1px solid #ddd;
      }
      .test {
      background: linear-gradient(#fff, #333);
      }
      .test2 {
      background: linear-gradient(#000, #f00 50%, #090);
      }
      .test3 {
      background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
      }
      .test4 {
      background: linear-gradient(45deg, #000, #f00 50%, #090);
      }
      .test5 {
      background: linear-gradient(to top right, #000, #f00 50%, #090);
      }
      </style>
      </head>
      <body>
      <div class="test"></div>
      <div class="test2"></div>
      <div class="test3"></div>
      <div class="test4"></div>
      <div class="test5"></div>
      </body>
      </html>

        

  •  运行结果

  • 其中  background: linear-gradient(to right,#FFB95E ,#F35C70);  直接是两种颜色的过度效果,运行结果如下图所示:

    如果使用 background: -webkit-linear-gradient(to right,#FFB95E 15%,#FCA661 5%,#FCA362 5%,#FA8F66 25%,#F5736B 20%,#F35C70 30%);实现页面的过度,则效果如下

css3中linear-gradient()的使用的更多相关文章

  1. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  2. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  3. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  6. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  7. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  8. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  9. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  10. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

随机推荐

  1. 应用程序池--IIS最大工作进程数

    IIS 6.0允许将应用程序池配置成一个Web园(Web Garden).要理解Web园的概念,可以设想这样一种情形:假设有一个IIS 5.0服务器和三个Web网站,每一个Web网站运行着相同的应用程 ...

  2. [转] 谈谈JS中的函数节流

    函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...

  3. C# Enum,Int,String的互相转换 [转]

    C# Enum,Int,String的互相转换 Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名 ...

  4. javascript OOP(上)(八)

    一.OOP的概念和继承 1.OOP概念 面向对象程序设计(Object-oriented programming,OOP)是一种程序设计范型,同时也是一种程序开发的方法.对象指的是类的实例.它将对象作 ...

  5. Android动画模式

    在Android中,有两种动画模式:Tween Animation(渐变动画)和Frame Animation(帧动画).渐变动画是通过对场景里的对象不断做图像变换(平移.缩放.旋转等)来产生动画效果 ...

  6. nginx与php-fpm通信的两种方式

    简述 在linux中,nginx服务器和php-fpm可以通过tcp socket和unix socket两种方式实现. unix socket是一种终端,可以使同一台操作系统上的两个或多个进程进行数 ...

  7. GFS 安装使用

    准备环境: 1.OS: Centos:7.2x86_64 2.主机 server1: 192.168.30.41 wohaoshuai1 server2: 192.168.30.42 wohaoshu ...

  8. Codechef FIBTREE 树链剖分 主席树 LCA 二次剩余 快速幂

    原文链接https://www.cnblogs.com/zhouzhendong/p/CC-FIBTREE.html 题目传送门 - CC-FIBTREE 题意 给定一个有 $n$ 个节点,初始点权都 ...

  9. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第四集之安装Linux】

    1,确保Linux镜像的路径存在 2,启动 3,在真实机情况下,进入BIOS修改安装操作系统的路径[记住:虚拟机不需要这一步.] 如果是真实机安装Linux,默认是从硬盘中安装,而不是从光盘.这就需要 ...

  10. oracle中两个时间类型的数据相减默认得到的是天数。

    想要得到月份数,需要使用months_between函数. months_between(to_date('201707','yyyyMM'),to_date('201706','yyyyMM'))  ...