渐变的用法及案例实现

渐变，大致上分为线性渐变、径向渐变、重复渐变。

1. 线性渐变。
1）语法。 background-image：linear-gradient（方向(deg），颜色简便的百分比）其中，百分比的作用是在线性的方向上分段，该节点达到颜色值，其余渐变。

代码实现

<html><style>.p{width: 500px;height: 500px;background-image: -webkit-linear-gradient(left top, red, blue, green);
}
</style><body>
<div class="p"></div>
</body></html>

呈现结果

2）方向。分上下左右和角度，默认值是top、to bottom、180deg如果添加方向，则必须知使用浏览器的内核识别标识，如果是IE浏览器则需要加上-moz-标识。若是safari & chorme内核的浏览器，则需加上-webkit-标识。像上述代码中就加入了-webkit-标识。

2. 径向渐变

1）语法。 radial-gradient（中心点，形状，颜色，渐变点的百分比）

2）形状。分为 circle 圆形和 ellipse 椭圆形

代码实现

background-image: -webkit-radial-gradient(center , red, green);

呈现结果

3. 重复渐变。repeat-（径向、线性）

在颜色方面，渐变可以使用多种颜色，还可以使用透明度。

用这些内容可以实现一个彩虹，改变一下横纵向发散点，填充些颜色即可。

代码实现

<html><style>.caihong{width: 500px;height: 300px;background-image: -webkit-radial-gradient(center bottom,transparent 30%,rgb(226, 126, 226) 40%,deepskyblue 45%,cyan 50%,greenyellow 55%,gold 60%,orange 65%,tomato 70%,transparent 75%);
}
</style><body>
<div class="caihong"></div>
</body></html>

呈现结果

渐变的用法及案例实现相关推荐

VTK：背景渐变BackgroundGradient用法实战
VTK:背景渐变BackgroundGradient用法实战程序输出程序完整源代码程序输出程序完整源代码 #include <vtkActor.h> #include <vt ...
吐血整理：C#顺序、选择、循环结构用法与案例，这一篇就够了！
C#语言中用于结构化程序设计的三种基本结构是:顺序结构.选择结构.循环结构.本文详细整理了以上三种结构的用法,案例. 文章目录 4.1 顺序结构 4.1.1 赋值语句 4.1.2 输入语句 4.1.3 ...
bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
python中try和except语句语言导入包吗_Python异常处理中try与except用法的案例
Python异常处理中try与except用法的案例发布时间:2020-11-03 09:44:36 来源:亿速云阅读:85 作者:小新小编给大家分享一下Python异常处理中try与excep ...
CSS---‘样式’基础用法与案例
1.外部样式表方式1: <link rel="stylesheet" type="text/css" href="文件路径"> ...
十分钟完成Bash 脚本进阶！列举Bash经典用法及其案例
前言:在linux中,Bash脚本是很基础的知识,大家可能一听脚本感觉很高大上,像小编当初刚开始学一样,感觉会写脚本的都是大神.虽然复杂的脚本是很烧脑,但是,当我们熟练的掌握了其中的用法与技巧,再多加 ...
Shell 脚本进阶，经典用法及其案例
点击上方蓝字关注我们! 来源:https://www.cnblogs.com/along21/p/7519710.html 一.条件选择.判断 1.条件选择if (1)用法格式 if 判断条件 1 ...
艾孜尔江_Unity 3D入门常用函数用法及案例概要【干货】
** 一. 版本控制 ** 目前流行的两大方式:SVN和Git: 前者采用增量式,后者采用快照式: 前者产生单点故障影响大. 安装git软件. 本地库--历史版本: 暂存区--临时存储: 工作区--写 ...
Switch语句用法及案例
一.Switch语句用法 switch是多分支语句,用于判断一个表达式的值,然后执行相应的语句.(可以实现多选一) switch语句执行思路:利用表达式的值,来判断执行哪个语句.(简单的来说就是利 ...

渐变的用法及案例实现

渐变的用法及案例实现相关推荐

最新文章

热门文章