css3的重复渐变是什么?如何使用?(代码示例)

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月30日06:57:27 评论 224 views
广告也精彩

本篇文章给大家带来的内容是介绍css3的重复渐变是什么?如何使用?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们就来介绍一下重复渐变是什么?

在css3中除了可以实现线性渐变【linear-gradient()】,径向渐变【radial-gradient()】外,还可以实现重复渐变。css3中重复渐变可以分为两种:

重复线性渐变:repeating-linear-gradient()

重复径向渐变:repeating-radial-gradient()

接下面我们通过简单的代码示例来看看两种重复渐变是如何使用的

重复渐变,在渲染时,终止颜色会在两个方向上无限重复,它们的位置以最后指定的终止颜色的位置和第一个指定的终止颜色的位置之间的差值的倍数移位。例如,repeating-linear-gradient(red 10px, blue 50px) 等效于linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)。注意,最后一个终止颜色和第一个终止颜色总是在每个组的边界处重合,如果渐变没有以相同的颜色开始和结束,这将产生尖锐的过渡。

其实重复渐变的语法和非重复渐变的语法是一样的,例:

repeating-linear-gradient(red, blue 20px, red 40px);

效果图:

css3的重复渐变是什么?如何使用?(代码示例)

repeating-radial-gradient(red, blue 20px, red 40px);

css3的重复渐变是什么?如何使用?(代码示例)

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);

css3的重复渐变是什么?如何使用?(代码示例)

如果第一终止颜色和最后一终止颜色之间的距离不是零,但是足够小以至于知道输出设备的物理分辨率不足以忠实地实现渲染渐变,但为了实现效果必须找到渐变的平均颜色并将渐变渲染为等于平均颜色的纯色图像。

如果第一个和最后一个终止颜色之间的距离为零(或由于实现限制而舍入为零),则必须找到渐变的具有相同数目和终止颜色的平均颜色,但是对于第一和最后一个终止颜色,则必须停止任意非零距离,剩下的颜色在它们之间保持相等的间隔。然后,它必须将梯度渲染为与平均颜色相等的纯色图像。

如果重复径向渐变的结束形状的宽度为非零且高度为零,或者接近于零,则在知道输出设备的物理分辨率不足以忠实地实现渲染渐变,则实现必须找到渐变的平均颜色,并将渐变渲染为等于平均颜色的纯色图像。

我们可以通过以下步骤来查找渐变的平均颜色

1、将列表定义为RGBA颜色的初始空列表,将总长度定义为第一个和最后一个颜色之间的距离。

2、对于每对相邻的色块,将重量定义为两个色标之间距离的一半除以总长度。添加两个条目列表,第一个通过表示RGBA中第一个颜色停止的颜色获得,并按重量缩放所有组件,第二个通过第二个颜色停止以相同方式获得。

3、按顺序对列表的条目求和以生成平均颜色,并将其返回。

总结:以上就是本篇文章所介绍的全部内容,希望能对大家的学习有所帮助。

以上就是css3的重复渐变是什么?如何使用?(代码示例)的详细内容,更多请关注css教程其它相关文章!

企鹅博客
  • 本文由 发表于 2019年9月30日06:57:27
  • 转载请务必保留本文链接:https://www.qieseo.com/364604.html
HTML和CSS3中的2D、3D结合实现动画效果 html教程

HTML和CSS3中的2D、3D结合实现动画效果

这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 虽然我们我们在前端工作中,对于2D、3D动画效果一般来说...
关于css3弹性盒模型的介绍 css教程

关于css3弹性盒模型的介绍

这篇文章主要介绍了关于css3弹性盒模型的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的...
如何用CSS3属性选择器替代JS的作用 css教程

如何用CSS3属性选择器替代JS的作用

我们知道,在CSS3中除了引入动画和滤镜等特效还有新的布局技术以外还有在选择器的方面也有增强,以前在JS才能完成的工作现在通过CSS的技术也可以实现完成,接下来就给大家介绍一下强大的CSS3 属性选择...
css3的Transition平滑过渡菜单栏实现 css教程

css3的Transition平滑过渡菜单栏实现

这次给大家带来css3的Transition平滑过渡菜单栏实现,实现Transition平滑过渡菜单栏的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS3的制作动画的三大属性(Transfor...

发表评论