h5-渐变的基本描述
<!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-渐变的基本描述的更多相关文章
- 微信支付开发(7) H5支付
关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html 本文 ...
- 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案
在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服务器方案架 ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变3
4 径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...
- OpenGL ES一些函数详解（一）
glLoadIdentity和glMultMatrix glLoadIdentity的作用是将当前模型视图矩阵转换为单位矩阵(行数和列数相同的矩阵,并且矩阵的左上角至右下角的连线上的元素都为1,其 ...
- CSharpGL(50)使用Assimp加载骨骼动画
CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...
- HTTP请求（Request）和回应（Response）对象
附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...
- HTML标签使用
`<!-- 什么是HTML 超文本标记语言 由标签(属性和实体组成)和内容组成 --> <!-- 定义文档类型 --> <!DOCTYPE html> <!- ...
- AI - TensorFlow - 示例05：保存和恢复模型
保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...
随机推荐
- 讨论（xia che ≖‿≖✧）magic number——1000000007
为什么要对1000000007取模(取余) 来看这篇博客的基本上都是和我一样脑子有坑的人,要么就是看了我某篇大数阶乘,大数的排列组合等类似博客被忽悠过来的.我刚刚说到那些类型的题目一般都要求将输出结果 ...
- Java并发读书笔记：线程通信之等待通知机制
目录 synchronized 与 volatile 等待/通知机制 等待 通知 面试常问的几个问题 sleep方法和wait方法的区别 关于放弃对象监视器 在并发编程中,保证线程同步,从而实现线程之 ...
- 关于TCP连接的3次握手和4次挥手
3次握手: 关键在于双方都需要确认自己的发信和收信功能正常,收信功能通过接收对方信息得到确认,发信功能需要发出信息—>对方回复信息得到确认. 举个日常例子,打电话时我们对话如下: 如上,需要第三 ...
- [转载]SQL Server 数据库定时自动备份
推荐使用SQLserver自带的SSMS工具创建维护计划来实现数据库定时自动备份 “维护计划”是在SSMS的对象资源管理中“管理”节点下面.使用维护计划可以通过可视化的操作,只点点鼠标就可以创建数据库 ...
- 018-PHP判断文件是否存在
<?php print("data.txt文件是否存在?" . "<br>"); if (file_exists("data.txt ...
- 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组（列表）循环输出
接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...
- SpringMVC：提交日期类型报400错误解决方法
方法1:可以使用@ControllerAdvice增强Controller @ControllerAdvice public class BaseControllerAdvice { // 初始化绑定 ...
- MBE风格图标
图标的定义 图标是一种通过相似性或类比行来代表对象的符号. 图标的重要性 1.图形以其无与伦比的识别性带来信息传达效率的提升. 2.图形以其百变多样的趣味性带来视觉体验的享受提成用户体验. 3.图形以 ...
- P 1032 挖掘机技术哪家强
转跳点:
- ZOJ - 3635 Cinema in Akiba（树状数组+二分）
题意:已知有n个人,从第一个人开始每个人被安排在第ai个空座上,有m组询问,问某人所坐的位置. 分析: 1.用树状数组维护空座的个数,方法: 将所有的空座初始化为1,sum(x)则表示从座位1到座位x ...