linear-gradient与radial-gradient

2024-04-19 20:48
文章标签 linear gradient radial

本文主要是介绍linear-gradient与radial-gradient,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。

渐变效果

要得上面的线性渐变效果,我们这样去定义CSS3样式:

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。

第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

线性渐变使用from()以及to()方法指定过渡颜色点:

指定过渡颜色效果

background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));

线性渐变多个过渡点在同一位置:

多个过渡点效果

background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

径向渐变综合效果演示:

径向渐变效果

background: -moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%),
-moz-radial-gradient(50px 70px, circle farthest-corner, #F30 0%, rgba(255, 159, 34, 0) 60%),
-moz-radial-gradient(80px 10px, circle farthest-corner, #03F 0%, rgba(222, 255, 0, 0) 80%);
background:-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

这篇关于linear-gradient与radial-gradient的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/918453

相关文章

理解分类器(linear)为什么可以做语义方向的指导?(解纠缠)

Attribute Manipulation(属性编辑)、disentanglement(解纠缠)常用的两种做法:线性探针和PCA_disentanglement和alignment-CSDN博客 在解纠缠的过程中,有一种非常简单的方法来引导G向某个方向进行生成,然后我们通过向不同的方向进行行走,那么就会得到这个属性上的图像。那么你利用多个方向进行生成,便得到了各种方向的图像,每个方向对应了很多

Nn criterions don’t compute the gradient w.r.t. targets error「pytorch」 (debug笔记)

Nn criterions don’t compute the gradient w.r.t. targets error「pytorch」 ##一、 缘由及解决方法 把这个pytorch-ddpg|github搬到jupyter notebook上运行时,出现错误Nn criterions don’t compute the gradient w.r.t. targets error。注:我用

【CSS渐变】背景中的百分比:深入理解`linear-gradient`,进度条填充

在现代网页设计中,CSS渐变是一种非常流行的视觉效果,它为网页背景或元素添加了深度和动态感。linear-gradient函数是实现线性渐变的关键工具,它允许我们创建从一种颜色平滑过渡到另一种颜色的视觉效果。在本篇博客中,我们将深入探讨linear-gradient函数中的百分比值,特别是像#C3002F 50%, #e8e8e8 0这样的用法,以及它们如何影响渐变效果。 什么是linear-g

AI学习指南深度学习篇-随机梯度下降法(Stochastic Gradient Descent,SGD)简介

AI学习指南深度学习篇-随机梯度下降法(Stochastic Gradient Descent,SGD)简介 在深度学习领域,优化算法是至关重要的一部分。其中,随机梯度下降法(Stochastic Gradient Descent,SGD)是最为常用且有效的优化算法之一。本篇将介绍SGD的背景和在深度学习中的重要性,解释SGD相对于传统梯度下降法的优势和适用场景,并提供详细的示例说明。 1.

[数字信号处理][Python] numpy.gradient()函数的算法实现

先看实例 import numpy as npsignal = [3,2,1,3,8,10]grad = np.gradient(signal)print(grad) 输出结果是 [-1. -1. 0.5 3.5 3.5 2. ] 这个结果是怎么来的呢? np.gradient 计算信号的数值梯度,也就是信号值的变化率。它使用中心差分法来计算中间点的梯度,并使用前向差分法和后向差分法

Spark MLlib模型训练—回归算法 Linear regression

Spark MLlib模型训练—回归算法 Linear regression 线性回归是回归分析中最基础且应用广泛的一种方法。它用于建模目标变量和一个或多个自变量之间的关系。随着大数据时代的到来,使用像 Spark 这样的分布式计算框架进行大规模数据处理和建模变得尤为重要。本文将全面解析 Spark 中的线性回归算法,介绍其原理、参数、Scala 实现、代码解读、结果分析以及实际应用场景。 1

线性代数:线性代数(Linear Algebra)综述

文章目录 矩阵 / Matrix元素运算加法 A + B A+B A+B数量乘法 c A cA cA与向量之间的运算乘法 A b A\mathbf{b} Ab 与矩阵之间的运算矩阵乘法 乘方 性质方阵 / Square Matrix零矩阵对角矩阵 / Diagonal Matrix单位矩阵 / Identity Matrix转置 / Transpose逆矩阵 / Inverse Mat

机器学习-有监督学习-集成学习方法(六):Bootstrap->Boosting(提升)方法->LightGBM(Light Gradient Boosting Machine)

机器学习-有监督学习-集成学习方法(六):Bootstrap->Boosting(提升)方法->LightGBM(Light Gradient Boosting Machine) LightGBM 中文文档 https://lightgbm.apachecn.org/ https://zhuanlan.zhihu.com/p/366952043

Spark MLlib模型训练—回归算法 GLR( Generalized Linear Regression)

Spark MLlib模型训练—回归算法 GLR( Generalized Linear Regression) 在大数据分析中,线性回归虽然常用,但在许多实际场景中,目标变量和特征之间的关系并非线性,这时广义线性回归(Generalized Linear Regression, GLR)便应运而生。GLR 是线性回归的扩展,能够处理非正态分布的目标变量,广泛用于分类、回归以及其他统计建模任务。

基于Python的机器学习系列(18):梯度提升分类(Gradient Boosting Classification)

简介         梯度提升(Gradient Boosting)是一种集成学习方法,通过逐步添加新的预测器来改进模型。在回归问题中,我们使用梯度来最小化残差。在分类问题中,我们可以利用梯度提升来进行二分类或多分类任务。与回归不同,分类问题需要使用如softmax这样的概率模型来处理类别标签。 梯度提升分类的工作原理         梯度提升分类的基本步骤与回归类似,但在分类任务中,我们使