用线性渐变创建图像。

  • 如果想创建以对角线方式渐变的图像，可以使用 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. JavaScript编程语言

    JavaScript编程语言 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应 ...

  2. vue-all

    http://v1-cn.vuejs.org/guide/ [1]. vue-cli [项目不完整,跳过]https://github.com/vuejs/vue-cli vue-cli-master ...

  3. Codeforces Round #506 (Div. 3)

    题解: div3水的没有什么意思 abc就不说了 d题比较显然的就是用hash 但是不能直接搞 所以我们要枚举他后面那个数的位数 然后用map判断就可以了 刚开始没搞清楚数据范围写了快速乘竟然被hac ...

  4. WPF: Hide grid row

    http://stackoverflow.com/questions/2502178/wpf-hide-grid-row Setting all the Items in the Row to Vis ...

  5. 安全测试robots

    http://stock.pingan.com/robots.txt

  6. spark操作kudu之DML操作

    Kudu支持许多DML类型的操作,其中一些操作包含在Spark on Kudu集成 包括: INSERT - 将DataFrame的行插入Kudu表.请注意,虽然API完全支持INSERT,但不鼓励在 ...

  7. Python学习（四） —— 编码

    一.枚举 enumerate,for i in enumerate(可迭代对象),返回元组,内容是(序列号,可迭代的每一个元素)        for i,j in enumerate(可迭代对象,开 ...

  8. 51Nod1766 树上的最远点对 ST表 LCA 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1766.html 题目传送门 - 51Nod1766 题意 n个点被n-1条边连接成了一颗树,给出a~ ...

  9. Git submodule 仓库中包含另外的仓库(子仓库)

    Git submodule 仓库中包含另外的仓库(子仓库) 添加 submodule 在父仓库 git 目录下: git submodule add ssh://ip/[path]/xxx.git 注 ...

  10. INSERT 中ON DUPLICATE KEY UPDATE的使用

    如果您指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则执行旧行UPDATE.例如,如果列a被定义为UNIQUE,并 ...