线性渐变

<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. [bzoj2055]80人环游世界[网络流，上下界网络流]

    手动画了整张图,,算是搞懂了吧,, #include <bits/stdc++.h> #define INF 0x3f3f3f3f using namespace std; templat ...

  2. SiteMesh2-decorators.xml文件

    SiteMesh默认使用decorators.xml作为装饰配置文件. decorators.xml顶层元素概览如下: <decorators> <decorator/> &l ...

  3. 函数操作(this操作)

    1.apply/call函数:会改变this关键字,并且第一个参数作为this关键字. /*apply与call区别*/ console.log(Array.prototype.join.call([ ...

  4. subclipse 和 eclipse结合遇到的问题

    subclipse是eclipse的一个SVN插件.但是我在使用的时候不断的报出下面的错误: the applet is attempting to access the "exists&q ...

  5. BC #62 div1 02

    /* 数位DP题,设dp[n][k][j]为前n位最后一位是k时mod为j的个数.操作都相同,可以使用矩阵加速.本来对于每一位是7*10,可以把它压向一个向量. 加速矩阵为70*70,再加一维计算前缀 ...

  6. 【分享】迅为iTOP4412开发板-Android系统屏幕旋转设置

    1.1概述 Android4.0,Androd4.4源代码能够编译成手机模式和平板模式,讯为iTop4412 开发平台 的Android系统默认编译为平板模式.客户须要依据自己的产品设计及应用环境,切 ...

  7. hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量

    做了非常久...... 题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...

  8. CentOS7安装MariaDB成功的实践

    前言 在自己的VPS的CentOS7安装Oracle的Mysql失败以后,我又开始找CentOS7上面安装MariaDB的方法,于是我找打了这篇文章:http://blog.csdn.net/defa ...

  9. css高级：font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  10. Apache Kafka-0.8.1.1源代码编译

    作者:过往记忆 | 新浪微博:左手牵右手TEL | 能够转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明博客地址:http://www.iteblog.com/文章标题:<Apac ...