用线性渐变创建图像。

  • 如果想创建以对角线方式渐变的图像，可以使用 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. 矩阵乘法的运算量计算（华为OJ）

    题目地址: https://www.nowcoder.com/practice/15e41630514445719a942e004edc0a5b?tpId=37&&tqId=21293 ...

  2. GZipStream 压缩与解压数据

    简介:此类表示 GZip 数据格式,它使用无损压缩和解压缩文件的行业标准算法.这种格式包括一个检测数据损坏的循环冗余校验值.GZip 数据格式使用的算法与 DeflateStream 类的算法相同,但 ...

  3. 解决AS gradle下载同步卡慢的问题

    国内因为GFW的原因,导致同步谷歌等服务器的插件源非常非常慢,几乎是龟爬,还好有阿里云的镜像源,据说速度很快,还不快试试: 1.build.gradle里的buildscript和allproject ...

  4. 【Android】ImageView ScaleType属性值

    ImageView.ScaleType / android:scaleType值的意义区别: CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的 ...

  5. python全栈开发day85-查：数据表 数据头 增加列 展示多对多字段 反向解析编辑和删除按钮的url

    直接上代码: # spark/service/sites.py from django.conf.urls import url from django.shortcuts import HttpRe ...

  6. python词云

    词云图 from os import path from PIL import Image import numpy as np import matplotlib.pyplot as plt fro ...

  7. BZOJ3583 杰杰的女性朋友 矩阵

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ3583.html 题目传送门 - BZOJ3583 题意 有一个 $n$ 个点构成的有向图. 对于每一个 ...

  8. BZOJ3862 Little Devil I 树链剖分

    原文链接http://www.cnblogs.com/zhouzhendong/p/8081514.html 题目传送门 - BZOJ3862 题意概括 一棵树,n个点,边权为黑或者白,支持3重操作: ...

  9. sql 将一列一逗号分隔拼成字符串

    select stuff((select ','+w.Waybillno from Web_Way_Waybill w where w.IsValid<>'Y' AND w.TruckOr ...

  10. 实体转xml 并以string输出

    <?xml version="1.0" encoding="utf-8"?><Root> <Header> <Mess ...