线性渐变

<style>

    div {

        width: 700px;

        height: 100px;

        /*方向：从右向左*/

        /*起始颜色：黄色*/

        /*终止颜色：绿色*/

        background-image: linear-gradient(to left, yellow, green);

    }

</style>

注意事项：

1、方向默认是从上到下

2、方向也可以是角度

3、方向：to left、to right、to bottom、tot op、45deg

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 1000px;

            height: 100px;

            background-image: linear-gradient(135deg,

            #000 0%,

            #000 25%,

            #fff 25%,

            #fff 50%,

            #000 50%,

            #000 75%,

            #fff 75%,

            #fff 100%

            );

            background-size: 100px 100%;

            animation: gun 1s infinite linear;

        }

        @keyframes gun {

            0% {

            }

            100% {

                background-position: 100px 0px;

            }

        }

    </style>

</head>

<body>

<div>

</div>

</body>

</html>

径向渐变

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 250px;

            height: 250px;

            border: 1px solid #000;

            margin: 20px auto;

            float: left;

        }

        /*

            径向渐变：

            radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;

            中心点位置：at  left  right  center bottom  top

        */

        div:nth-child(1) {

            background-image: radial-gradient(at left top, yellow, green);

        }

        div:nth-child(2) {

            background-image: radial-gradient(at 50px 50px, yellow, green);

        }

        div:nth-child(3) {

            background-image: radial-gradient(100px at center, yellow, green);

        }

        div:nth-child(4) {

            background-image: radial-gradient(100px at center,

            yellow 0%,

            green 30%,

            blue 60%,

            red 100%);

        }

        div:nth-child(5) {

            background-image: radial-gradient(100px 50px at center, yellow, green);

        }

    </style>

</head>

<body>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</body>

</html>

 渐变球体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 渐变</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .radial-gradient {

            width: 200px;

            height: 200px;

            margin: 40px auto;

            border-radius: 100px;

            background-color: blue;

            background-image: radial-gradient(

                200px at 50px 60px,

                rgba(0, 0, 0, 0),

                rgba(0, 0, 0, 0.6)

            );

        }

    </style>

</head>

<body>

    <div class="radial-gradient"></div>

</body>

</html>

html5——渐变的更多相关文章

  1. html5 渐变按钮练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. html5 基本布局+新标签+新选择器 + 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  4. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  5. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  6. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  7. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

  8. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  9. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

随机推荐

  1. 利用async和await异步操作解决node.js里面fs模块异步读写，同步结果的问题

    async await 解决异步问题,这两个关键字是es7提出的,所以测试,node和浏览器版本提高一些 async await 操作基于promise实现的 async await这两个关键字是一起 ...

  2. 转载 字符串hash

    转载自:http://www.cnblogs.com/jiu0821/p/4554352.html 求一个字符串的hash值: •现在我们希望找到一个hash函数,使得每一个字符串都能够映射到一个整数 ...

  3. JAVA内存模型与线程以及volatile理解

    Java内存模型是围绕在并发过程中如何处理原子性.可见性.有序性来建立的. 一.主内存与工作内存 Java内存模型主要目标是在虚拟机中将变量存储到内存和从内存中取出变量.这里的变量包括:实例字段.静态 ...

  4. androidannotations的background和UiThread配合使用參考

    简单介绍 androidannotations在开发中的代码规范思考:(MVC思考)时间太紧,先贴代码: Activity的代码: package edu.njupt.zhb.main; import ...

  5. [转]Android程序框架设计

    这篇文章主要内容来自于之前我讲的一个PPT文档,现在将其整理如下.欢迎指正.以下的内容都是来自于我自身的经验,欢迎大家多提自己的建议. 1.一些概念 模式的定义: 每个模式都描述了一个在我们的环境中不 ...

  6. 【poj 1724】 ROADS 最短路（dijkstra+优先队列）

    ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12436 Accepted: 4591 Description N ...

  7. coffeescript的上下文

    CoffeeScript代码中,变量,甚至函数前面有时会带上一个@符号,那么翻译到 javascript里,就是 "this." 这就涉及到运行过程中的上下文. 这个this指什么 ...

  8. 洛谷P1193 洛谷团队训练VS传统团队训练

    题目背景 "在中学的信息学教育领域,洛谷无疑是一个相当受欢迎的辅助网站.同时有百余所学校正在通过洛谷进行信息学竞赛(以后简称OI)的教育.洛谷之所以如此受欢迎,是因为洛谷创新的将OI教育的几 ...

  9. POJ2449 Remmarguts' Date 第K短路

    POJ2449 比较裸的K短路问题 K短路听起来高大上 实际思路并不复杂 首先对终点t到其他所有点求最短路 即为dist[] 然后由起点s 根据当前走过的距离+dist[]进行A*搜索 第k次到达t即 ...

  10. bzoj3112

    http://www.lydsy.com/JudgeOnline/problem.php?id=3112 模板题...模板又打错了... #include<bits/stdc++.h> u ...