<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*线性渐变*/

         .linear-gradient{

             width: 300px;

             height: 300px;

             /*添加渐变：渐变不是一个单一色，他产生的是图像，所以用background*/

             /*linnar-gradient(方向，开始颜色  位置，颜色二  位置，颜色三 位置)

             方向

             to top：0deg

             to right：90deg

             to bottom：180deg   默认值

             to left：270deg

             */

             /*background: linear-gradient(to right,red,blue);*/

             background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);

         }

         /*径向渐变*/

         .radial-gradient{

             width: 300px;

             height: 300px;

             /*background: radial-gradient(red,blue);

             语法：radial-gradient(形状，大小，坐标)

             形状shape：circle:产生正方形的渐变   ellipse:适配当前形状，如果是正方形两者一样.如果宽高不一样，默认效果切换带ellipse

             at position:坐标，默认在正中心。可以赋值坐标，也可以赋值关键字(legt center right top bottom)

             大小size：closest-side：最近边；farthest-side：最远变；closest-corner：最近角；farthest-corner：最远角。默认是最远角

             */

             /*background: radial-gradient(at left top,red,blue);*/

            /* background: radial-gradient(circle closest-corner at 50px 50px,red,blue);*/

             background: radial-gradient(red,red 50%,blue 50%,blue);

         }

         /*重复渐变*/

         .reparing-radial-gradient{

             width: 300px;

             height: 300px;

             background: repeating-radial-gradient(circle farthest-side at center center,

             #fff 0%,#fff 10%,

             #000 10%,#000 20%);

         }

         .repeating-linear-gradient{

             width: 300px;

             height: 800px;

             background: repeating-linear-gradient(30deg,

             #fff 0%,#fff 10%,

             #000 10%,#000 20%);

         }

         .repeating-conic-gradient{

             width: 400px;

             height: 400px;

             background: repeating-conic-gradient(

                     #fff 0%,#ccc 10%,

                     #000 10%,#0000 20%

             );

         }

     </style>

 </head>

 <body>

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

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

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

 <div class="repeating-linear-gradient"></div>

 <div class="repeating-conic-gradient"></div>

 </body>

 </html>

h5-渐变的基本描述的更多相关文章

  1. 微信支付开发(7) H5支付

    关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html 本文 ...

  2. 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案

    在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服务器方案架 ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 渐变3

    4  径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  5. 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案

    背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...

  6. OpenGL ES一些函数详解（一）

    glLoadIdentity和glMultMatrix   glLoadIdentity的作用是将当前模型视图矩阵转换为单位矩阵(行数和列数相同的矩阵,并且矩阵的左上角至右下角的连线上的元素都为1,其 ...

  7. CSharpGL(50)使用Assimp加载骨骼动画

    CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...

  8. HTTP请求（Request）和回应（Response）对象

    附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...

  9. HTML标签使用

    `<!-- 什么是HTML 超文本标记语言 由标签(属性和实体组成)和内容组成 --> <!-- 定义文档类型 --> <!DOCTYPE html> <!- ...

  10. AI - TensorFlow - 示例05：保存和恢复模型

    保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...

随机推荐

  1. HDU - 1864 最大报销额 （01背包）

    题意:现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编写 ...

  2. 从PC厂商狠抓粉丝经济看，春天将至？

    10月中旬,市场研究机构IDC发布的全球三季度PC出货量报告显示,第三季度全球个人电脑出货量总计6740万台,比去年同期下降0.9%.似乎这一数据的发布,依旧在证明着PC市场的颓势.但在这样的大背景下 ...

  3. [JZOI]1251.收费站[二分][最短路]

    Description 在某个遥远的国家里,有n个城市.编号为1,2,3,--,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定 ...

  4. 一百零三、SAP中常量的定义CONSTANTS

    一.代码如下 二.运行效果如下

  5. 075-PHP数组添加元素

    <?php $arr = array(); //定义一个数组,它没有任何元素 echo '增加元素之前数组中元素的个数为:' . count($arr); //输出数组个数 for ($i = ...

  6. HZNU-ACM寒假集训Day12小结 数论入门

    符号说明 a|b      a整除b (a,b)    a与b的最大公因数 [a,b]     a与b的最小公倍数 pα||a    pα|a但pα+1∤a a≡b(mod m) a与b对模m同余 a ...

  7. Docker PHP 例子

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  8. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  9. 【剑指Offer】面试题03. 数组中重复的数字

    题目 找出数组中重复的数字. 在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意 ...

  10. java的形参与实参的区别以及java的方法

    package com.lv.study; public class Demo05 { public static void main(String[] args) { //我想要用什么分隔符进行分隔 ...