线性渐变

<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. 转载 - Python里面关于 模块 和 包 和 __init__.py 的一些事

    出处:http://www.cnblogs.com/tqsummer/archive/2011/01/24/1943273.html python中的Module是比较重要的概念.常见的情况是,事先写 ...

  2. - > 网络流（【最大流】草地排水模板题）

    1993 草地排水 USACO  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 在农夫约翰的农场上,每 ...

  3. ArcGIS AO中控制图层中要素可见状态的总结

    一.DefinitionExpression 实现新建查询图层,查询结果要素为选中状态 该接口可以通过两种方法来控制要素的可见状态. 思路1 通过该接口的 DefinitionExpression 方 ...

  4. win7下安装SQLSERVER2000

    来自为知笔记(Wiz)

  5. 精确计算java中float和double的精度

    [本文相关的代码放在github上.地址为:https://github.com/VigourJiang/StructuredFloat] Java中double类型的格式基本遵循IEEE 754标准 ...

  6. iOS 中删除cookie的正确做法

    需求:删除 qq 登录的 cookie,保证下次打开 qq 登录页面不会默认登录 实现:      NSString *url =@"https://w.mail.qq.com/cgi-bi ...

  7. 把TXT GB2312文件转换成TXT UTF8文件

    /// <summary>        /// 把TXT GB2312文件转换成TXT UTF8文件        /// </summary>        /// < ...

  8. 使用EL表达式正确情况下报错：javax.servlet.jsp cannot be resolved to a type

    这个错误可能是服务器自带的servlet库未导入的原因.右键项目属性,转到Targeted Runtimes,选择一个服务器,例如Tomcat,单击应用,可能就可以解决.

  9. django - request.POST和request.body获取值时出现的情况

    django request.POST / request.body 当request.POST没有值 需要考虑下面两个要求 1.如果请求头中的: Content-Type: application/ ...

  10. 异常强大的Markdown编辑插件-Markdown Preview Enhanced

    最近使用Markdown写作,了解到以下这些Markdown写作工具 MaHua 在线markdown编辑器 百度搜索Markdown时,它排在非常靠前的位置 马克飞象- 专为印象笔记打造的Markd ...