线性渐变

<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. 推销员（codevs 5126）

    题目描述 Description 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第i家住户到入口的距 ...

  2. ZooKeeper实现配置中心的实例（原生API实现）（转）

    说明:要实现配置中心的例子,可以选择的SDK有很多,原生自带的SDK也是不错的选择.比如使用I0Itec,Spring Boot集成等. 大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应 ...

  3. Java中DAO/DTO/PO/VO/BO/QO/POJO

    ORM:是Object Relational Mapping(对象关系映射)的缩写. 通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据.在O/R/M的世界里,有两个基本的也是重要的东东需要了 ...

  4. 智能家居APP开发

    智能家居APP开发 APP开发技术qq交流群:347072638 前言,随着智能硬件设备的流行,智能家居開始红火,智能家居就是家用电器的智能化.包含智能锁,灯,空调,灯,音箱等等,移动设备通过WIFI ...

  5. 安卓下载文件怎样更新UI进度

    曾经写过几篇关于下载的文章.总的来说是下面几点: 1.维护一个下载进程的Hashmap,key:使用Md5进行处理后的文件下载地址,value为下载的Task. 以防止下载反复.并将信息保存至数据库. ...

  6. C# DateTime.Now和DateTime.UtcNow的区别

    DateTime.UtcNow.ToString()输出的是0时区的事件(通俗点就是格林威治时间的当前时间),DateTime.Now.ToString()输出的是当前时区的时间,我们中国使用的是东八 ...

  7. 一个unity3d lightmap问题

    上周美术同学在使用unity3d制作lightmap的过程中,发现部分被lightmap影响的模型在移动端上效果与pc端不一致.当时我大概看了下,分析后,得到一个结论是“在移动端上lightmap的h ...

  8. python-pexpect_01安装

    一:python2.7.12安装   #获取python2.7.12 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tgz   ...

  9. CentOS6.5下用Git克隆代码（https方式）

    一.首先最好保证GIT是最新版 查看GIT命令 $ git --version 有关git的安装,应该有好多文章介绍.注意更新之后,要重启系统,否则显示的版本号,还是老版本. 二.如果工作环境存在网络 ...

  10. BZOJ 3343: 教主的魔法(分块+二分查找)

    BZOJ 3343: 教主的魔法(分块+二分查找) 3343: 教主的魔法 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1172  Solved:  ...