文档章节

h5-渐变的基本描述

o
 osc_wws45aot
发布于 2019/08/20 15:16
字数 404
阅读 9
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*线性渐变*/
 8         .linear-gradient{
 9             width: 300px;
10             height: 300px;
11             /*添加渐变:渐变不是一个单一色,他产生的是图像,所以用background*/
12             /*linnar-gradient(方向,开始颜色  位置,颜色二  位置,颜色三 位置)
13             方向
14             to top:0deg
15             to right:90deg
16             to bottom:180deg   默认值
17             to left:270deg
18             */
19             /*background: linear-gradient(to right,red,blue);*/
20             background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
21         }
22 
23         /*径向渐变*/
24         .radial-gradient{
25             width: 300px;
26             height: 300px;
27             /*background: radial-gradient(red,blue);
28             语法:radial-gradient(形状,大小,坐标)
29             形状shape:circle:产生正方形的渐变   ellipse:适配当前形状,如果是正方形两者一样.如果宽高不一样,默认效果切换带ellipse
30             at position:坐标,默认在正中心。可以赋值坐标,也可以赋值关键字(legt center right top bottom)
31             大小size:closest-side:最近边;farthest-side:最远变;closest-corner:最近角;farthest-corner:最远角。默认是最远角
32             */
33             /*background: radial-gradient(at left top,red,blue);*/
34            /* background: radial-gradient(circle closest-corner at 50px 50px,red,blue);*/
35             background: radial-gradient(red,red 50%,blue 50%,blue);
36         }
37 
38 
39         /*重复渐变*/
40         .reparing-radial-gradient{
41             width: 300px;
42             height: 300px;
43             background: repeating-radial-gradient(circle farthest-side at center center,
44             #fff 0%,#fff 10%,
45             #000 10%,#000 20%);
46         }
47         .repeating-linear-gradient{
48             width: 300px;
49             height: 800px;
50             background: repeating-linear-gradient(30deg,
51             #fff 0%,#fff 10%,
52             #000 10%,#000 20%);
53         }
54         .repeating-conic-gradient{
55             width: 400px;
56             height: 400px;
57             background: repeating-conic-gradient(
58                     #fff 0%,#ccc 10%,
59                     #000 10%,#0000 20%
60             );
61         }
62     </style>
63 </head>
64 <body>
65 <div class="linear-gradient"></div>
66 <div class="radial-gradient"></div>
67 <div class="reparing-radial-gradient"></div>
68 <div class="repeating-linear-gradient"></div>
69 <div class="repeating-conic-gradient"></div>
70 </body>
71 </html>

 

上一篇: h5-钟表动画案例
下一篇: XLA
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
h5实现slider滑块功能及样式自定义

公司最近人手不足,于是,又开始折腾起Html来了 本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动 我们先来看看效果图 上图中,我们需要实现的难点就是那个绿色的滑块,其...

ThinkinLiu
2018/07/16
0
0
H5之画布canvas小记,以及通过画布实现原子无规则运动

我们知道html在h5出之前就仅仅只是一个标签,一个标记,语义化并不强,后来新增的标签如video,audio都是语义化更强(让人一看就懂是什么东西,反正我是这么理解的,一个div不代表着什么),本...

osc_kf729ara
2018/03/23
1
0
canvas基本绘制图形

canvas H5新增的元素,提供了强大的图形的绘制,变换,图片,视频的处理等等。需要使用JavaScript脚本操作 浏览器支持 大多数的现代浏览器都可以支持;IE8以下的浏览器不支持 画布 可支持设置...

osc_zqfy88s7
2018/01/17
2
0
CSS渐变的两种基本用法

1.线性渐变(linear-gradient)   基础用法:background:linear-gradient(angle,start-color,soft-line,end-color);   依次解释下这几个参数:   angle是渐变角度,不写则默认从上到下...

osc_hpzuj4e3
2019/05/30
2
0
HTML5游戏开发凭什么这么火?看了你就知道了...

很多人都会问H5游戏有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然存在着不少缺点,包括大家所提到的性能较弱...

让往事随风
2016/04/21
111
1

没有更多内容

加载失败,请刷新页面

加载更多

将分段视频合并

环境 操作系统:Ubuntu Kylin 优麒麟 20.04 LTS 适用架构:AMD64、ARM64(鲲鹏、飞腾) 方法 将下载的视频分片段放入同一个文件夹。按片段排序的文件名汇入list.txt。 ls qq_video*.mp4 | s...

chipo
31分钟前
13
0
C#和C++混合编程系列1-内存管理

2篇前置博文: Http服务器-第十步加入基于Mono平台的C#脚本支持 https://my.oschina.net/kkkkkkkkkkkkk/blog/4322402 架构9-引入C#混合编程-服务端概述 https://my.oschina.net/kkkkkkkkkkk...

梦想游戏人
34分钟前
18
0
SQL使用SELECT * [columnA除外] FROM tableA排除列?

问题: We all know that to select all columns from a table, we can use 我们都知道要从表中选择所有列,我们可以使用 SELECT * FROM tableA Is there a way to exclude column(s) from......

fyin1314
50分钟前
12
0
LVS-NAT模式示例配置

实验环境 Centos 7.6.1810 + ipvsadm v1.27 配置脚本 Director配置(1台) yum install -y ipvsadm; echo 1 > /proc/sys/net/ipv4/ip_forward; ipvsadm -C; # 清空所有集群配置 ipvsadm -A -......

月下狼
50分钟前
9
0
linux 复制 黏贴

飞雪无痕
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部