线性渐变

<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. uestc 1903

    #include<stdio.h> int main() { int n,m,i,t; scanf("%d",&t); while(t--){ scanf(&q ...

  2. PatentTips - Method for booting a host device from an MMC/SD device

    FIELD OF THE INVENTION The present invention relates to a memory device and especially to the interf ...

  3. PatentTips - Hamming distance comparison

    BACKGROUND INFORMATION In a typical data processing environment, data may be transmitted in multiple ...

  4. xcode5修改APP名字

    bundle display name 配置文件里面设置, 这个指的是显示在icon下面的名字.application name在itunes connect上改, 是指显示在app store上的名 ...

  5. [bzoj 1025][SCOI2009]游戏（DP）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1025 分析:首先这个问题等价于A1+A2+……Ak=n,求lcm(A1,A2,……,Ak)的种 ...

  6. 学习——Git及VersionControl

    一.Git基本介绍 1.Git是什么? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  7. Ubuntu 16.04下截图工具Shutter

    Ubuntu下自带截图工具Screenshot,但是有个缺点是不能对截到的图进行标注,快捷键如下: 截图的升级软件Shutter,具有标注的功能 安装: sudo apt-get install sh ...

  8. shell中的四种模式匹配

    POSIX为shell为进行模式匹配提供了四种参数替换结构(老版本的shell可能不支持),每种结构有两个参数:变量名(或变量号)及模式. 第一种模式:    ${variable%pattern}, ...

  9. iOS-UITextView-文本输入视图的使用

    #import "ViewController.h" @interface ViewController ()<UITextViewDelegate> { UIView ...

  10. 创业公司十分钟简单搭建GIT私有库

    欢迎关注老码农的微信公共账号,与CSDN博客同步 一.背景 小公司.协同开发的人不多,建gitlab比較麻烦,仅仅须要在Server端建立一个简单的git共享库就OK. 二.建立仓库 Server端: ...