<!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. eclipse启动tomcat访问localhost:8080报404

    直接双击tomcat\bin目录下面的startup.bat启动 是没问题 的 但是eclipse启动tomcat访问localhost:8080报404 解决方案如下: 双击红色圈里面的tomcat ...

  2. Jinja2语法小记

    jinja2模板语法小记 Jinja2模板中文文档 三种常见界定符 表达式 {{ ... }} 用于装载字符串.变量.函数调用等 语句 {% ... %} 用于装载控制语句,比如if判断.for循环等 ...

  3. Vulkan Device Memory

    1.通过下面的接口,可以获得显卡支持的所有内存类型: MemoryType的类型如下: 2.引用索引3对内存的描述 我们可以通过调用vkGetPhysicalDeviceMemoryPropertie ...

  4. Pycharm连接Mysql失败. [08001] Could not create connection to database server.

    使用Pycharm连接MySQL时遇到如下问题,错误代码[08001] 查了很多资料归纳一下可能是如下几个原因 0.mysql.server没开 找到对应系统下的mysql.server 启动/重启命 ...

  5. 三十、SAP中的内置图标

    一.选择[编辑]->[模式] 二.选中写入模式 三.选中图标 四.选择我们需要的图标 五.选中图标后,选择复制 六.点击之后,会回到代码界面,如下 七.执行结果如下,显示出了一个神奇的图标

  6. 019-PHP创建目录函数

    <?php if (mkdir("myDir1", 0777)) //创建目录的函数 { print("目录创建成功"); //目录建立成功 } else ...

  7. 八、React实战:可交互待办事务表(表单使用、数据的本地缓存local srtorage、生命同期函数(页面加载就会执行函数名固定为componentDidMount()))

    一.项目功能概述 示例网址:http://www.todolist.cn/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...

  8. js原型链理解(4)-经典继承

    经典继承就是组合继承,就是组合构造函数和原型链的优点混合继承. 1.避免引用类型的属性初始化 2.避免相同方法的多次初始化 function Super(name){ this.ages = [100 ...

  9. 第一部分 JavaScript语言核心(一)

    第二章 词法结构 P25 JavaScript是区分大小写的语言:但HTML不区分大小写(XHTML区分大小写,但浏览器具有强大的纠错能力.) 第三章 类型.变量和值 P32 var(variable ...

  10. ESP8266 SDK开发: 外设篇-串口

    串口分布 串口切换说明 1.默认所有的数据都使用串口0输出 官方提供了函数可以选择printf利用哪一个串口输出 配置printf使用串口1打印输出,波特率115200 (注:这样配置对于调试程序很有 ...