gradient设置上下渐变_图解CSS: CSS渐变

CSS的渐变主要分布在 conic-gradient()和repeating-conic-gradient()两个属性。在CSS中,CSS的渐变相当于图像,我们可以使用线性渐变(linear-gradient()和repeating-linear-gradient())、径向渐变(radial-gradient()和repeating-radial-gradient())和锥形渐变(conic-gradient()和repeat-conic-gradient())。事实上这三种渐变就相当于背景图像,而且渐变通常是一种颜色渐变到另一种颜色,但是CSS允许你控制渐变发生的每一个方面,从方向、形状到颜色,以及它们如何从一个渐变到另一个渐变。在这篇文章中,主要和大家一起探讨有关于CSS渐变相关的话题。

CSS 渐变简介

渐变一般指的是从一种颜色平滑地过渡到另一种颜色,而且用户代理(比如浏览器)将其渲染为图像,这个图像可以是背景图像(background-image)、边框图像(border-image)和遮罩图像(mask-image)等,即CSS中可以接受图像的任何属性。开发者可以使用一些指定的 CSS渐变函数来指定这些图像,这样用户代理就要以在渲染页面时自动生成图像。其主要语法:

= [

| |

| |

|

]

比如我们将渐变运用到background-image属性上:

background-image: linear-gradient(#ff8a00, #e52e71);

background-image: repeating-linear-gradient(to right,#ff8a00 10%,#e52e71 20%);}

background-image: radial-gradient(#ff8a00, #e52e71);

background-image: repeating-radial-gradient(circle, #ff8a00 10%, #e52e71 20%);

background-image: conic-gradient(#ff8a00, #e52e71);

background-image: repeating-conic-gradient(#ff8a00 10%, #e52e71 20%);

效果如下:

渐变中的色标

不管使用哪一个渐变函数绘制的渐变图像都由一组指定的颜色构成,并且每个颜色都有对应的位置,在渐变中将其称为,它主要由两部分组成,颜色和渐变线。即渐变函数中指定的 每一个点的颜色。我们通常把这个颜色和相应的位置称为渐变中的色标:

6e2fe4470e588021352a49f94ec921ad.png

颜色停止()和过渡提示是在一个颜色停止列表()中指定的,这个颜色停止列表是一个包含两个或更多颜色停止和可选过渡提示的列表:

= , [ ? , ]#

= && ?

=

比如下面这个示例:

background-image: linear-gradient(to right, rgb(56, 0, 253) 0%, rgb(255, 0, 146) 20%, rgb(255, 111, 177) 40%, rgb(255, 71, 64) 80%, rgb(30,90,88) 100%);

c89e3e10210b049bcb88a4fbb4a1b21c.png

在这个示例中,渐变的梯度线(也称为“渐变线”)是矩形的左侧边缘至右侧边缘,在这个渐变梯度线上有一个五个颜色组成的颜色停止列表,每个颜色的停止位置分别是0%、20%、40%、80%和100%。颜色的停止位置可以是百分比也可以其他的长度值(),比如px。如果颜色停止位置是百分比,它的计算是根据起始点和结束点之间梯度线的长度来确定,起始点为0%,结束点是100%。梯度线长度从元素的起始点沿终点方向沿梯度线测量。

CSS中的百分比计算是个复杂的体系,假设我们把上面的线性渐变运用于一个宽度为835px的容器中,它的渐变梯度线长度是835px,那么上对应的百分比转换成px的话是用颜色停止位置的百分比值乘以元素的宽度(width):

91a66f6255f0177fa262abdba2346ba4.png

注意,上面这个示例算是一个特殊的示例,渐变的角度是0(即to right或to left),但渐变的梯度线长度和渐变角度是有关的,比如,我们把to right换成45deg:

background-image: linear-gradient(45deg, rgb(56, 0, 253) 0%, rgb(255, 0, 146) 20%, rgb(255, 111, 177) 40%, rgb(255, 71, 64) 80%, rgb(30,90,88) 100%);

梯度线长度就变了:

f9b4bc498e0733804391166cd569a9e9.png

这个时候渐变梯度线长度的计算就复杂了。具体如何计算,我们后面会花一定的篇幅来专门介绍。

在渐变中,颜色停止和过渡提示的位置通常位于元素盒子的起始点和结束点之间,但这不是必需的。比如,我们在线上渐变使用多个渐变颜色,但并没有显式指定颜色停止的位置:

background-image: linear-gradient(to right, rgb(56, 0, 253) , rgb(255, 0, 146) , rgb(255, 111, 177) , rgb(255, 71, 64), rgb(30,90,88) );

这个时候会自动被分配一个位置。颜色停止列表中的第一个或最后一个颜色停止分别被指定为渐变梯度线的0%位置(渐变梯度线起始位置)和渐变梯度线的100%位置(渐变梯度线终点位置)。就该示例来说,由五个颜色组成的颜色停止列表,构建四个颜色区间,那么每个区间将会平均分配渐变梯度线的长度,也就是说示例中的第二个颜色的停止位置位于渐变梯度线的25%位置,第三个颜色的停止位置位于渐变梯度线的50%位置,第四个颜色的停止位置位于渐变梯度线的75%位置:

0c75f8458f2a267acf49a0a74a313832.png

你可能已经发现了,在上面这个示例中,并没有显式的给每个停止颜色指定停止位置,但用户代理在渲染该图像时对每个停止颜色做了一个修正处理。这个过程是一个自动过程,并且这个过程也称为颜色停止修正。用户代理在解析每个色块(停止颜色)的使用位置时,会按下面的步骤来处理:

① 如果第一个停止颜色没有显式设置停止位置,将其停止位置设置为0%;如果最后一个停止颜色没有显式设置停止位置,将其停止位置设置为100%

② 如果一个停止颜色或过渡提示的位置小于停止颜色列表中它前面的任何停止颜色或过渡提示的指定位置,则将其停止位置设置为等于它前面的任何停止颜色或过渡提示的指定位置的最大位置

③ 如果任何停止颜色没有停止位置,那么它们的停止位置会均分有停止位置的前后停止颜色之间的间隔

应用这些规则,所有停止颜色和过渡提示都将有明确的停止位置和停止颜色,并按升序排列。下面这几对渐变,每一对中的后者是前者的手工“修正”版本,通过应用上述规则获得。对于每一对,两个渐变渲染的结果都是相同的。每个箭头中的数字指定在转换中调用了哪些修正步骤。

background-image: linear-gradient(to right, rgb(56, 0, 253) , rgb(255, 0, 146) 20%, rgb(255, 71, 64));

// = ① >>

background-image: linear-gradient(to right, rgb(56, 0, 253) 0% , rgb(255, 0, 146) 20%, rgb(255, 71, 64) 100%);

根据“规则①”对第一个停止颜色和最后一个停止颜色做修正,第一个停止颜色的停止位置位于渐变线的0%,最后一个停止颜色的停止位置位于渐变线的100%:

3384cad9c4a765399f025fe38932d527.png

background-image: linear-gradient(to right, rgb(56, 0, 253) 40% , rgb(255, 0, 146), rgb(255, 71, 64), rgb(188,188,90));

// = ①, ③>>

background-image: linear-gradient(to right, rgb(56, 0, 253) 40% , rgb(255, 0, 146) 60%, rgb(255, 71, 64) 80%, rgb(188,188,90) 100%);

根据“规则①”将最后一个停止颜色(rgb(188, 188, 90))的停止位置修正为渐变线的100%位置,然后根据“规则③”对第二个停止颜色(rgb(255, 0, 146))和第三个停止颜色(rgb(255, 71, 64))的停止位置进行修正。因为这两个停止颜色都没有显式设置停止位置,因此它会均分第一个停止颜色和最后一个停止颜色之间的间距(即渐变线的100% - 40% = 60%),根据计算可以得到第二个停止颜色的停止位置位于渐变线的60%,第三个停止颜色的停止位置位于渐变线的80%:

f2911b5355a9d796f10399ea5aebe8d8.png

background-image: linear-gradient(to right, rgb(56, 0, 253) -10% , rgb(255, 0, 146), rgb(255, 71, 64));

// = ①, ③ >>

background-image: linear-gradient(to right, rgb(56, 0, 253) -10% , rgb(255, 0, 146) 45%, rgb(255, 71, 64) 100%);

这个示例也是根据“规则①, ③”来进行修正的,最后一个停止颜色的停止位置会位于渐变线的100%,第二个停止颜色(rgb(255, 0, 146))没有显式设置停止位置,将会均分第一个和最后一个停止颜色位于渐变线上的间距(即100% - (-10%) ÷ 2 = 55%),也就是容器宽度的45%:

1427e411188458486bc23f3dc2bfe255.png

background-image: linear-gradient(to right, rgb(56, 0, 253) -50px , rgb(255, 0, 146), rgb(255, 71, 64));

// = ①, ③ >>

background-image: linear-gradient(to right, rgb(56, 0, 253) -50px , rgb(255, 0, 146) calc(50% - 25px), rgb(255, 71, 64) 100%);

这个示例和上面的示例是相似的,不同之处停止颜色的停止位置有两种不同的单位(px和%),但修正规则是相同的,第二个停止颜色rgb(255, 0, 146)没有显式设置停止位置,它会是均分与其相邻两停止颜色位置之间的间距(即100% - (-50px) ÷ 2),最终的值是100% - (-50px) ÷ 2 - 50px = 50% - 25px,在CSS中不同单位之间的混合计算需要使用calc()函数来表达,即calc(50% - 25px):

61889680b44728b17787351415b76d5a.png

注意:如果在渐变中停止颜色的停止位置使用混合单位值(比如px,em,vw或 %)时要多加小心,因为这可能会导正停止颜色在之前的停止颜色之前无意地移动。比如background-image: linear-gradient(yellow 100px, blue 50%),当容器高度不小于200px时不会触发任何颜色停止位置的修正,然而,当容器高度是150px时,那么blue的停止位置就相当于75px,位于yellow之前,根据前面“规则②”,blue停止颜色的停止位置会得到修正,会修正为和yellow相同的停止位置,即100px。

background-image: linear-gradient(to right, rgb(56, 0, 253) 20%, rgb(255, 0, 146) 0%, rgb(255, 71, 64) 40%);

// = ② >>

background-image: linear-gradient(to right, rgb(56, 0, 253) 20%, rgb(255, 0, 146) 20%, rgb(255, 71, 64) 40%);

在这个示例中,虽然三个停止颜色都显式指定了停止位置,但第二个停止颜色的停止位置设置了0%,它比前面的停止颜色的停止位置要小,这个时候会根据“规则②”进行调整,会将其停止位置设置为前面最大的位置,即20%:

b2156f4995d125cee602899542e903d9.png

再来看一个示例:

background-image: linear-gradient(to right, rgb(56, 0, 253), rgb(255, 0, 146) -20%, rgb(32,123,225) 50%,rgb(255, 111, 177) 120%, rgb(55, 71, 164));

// = ①, ② >>

background-image: linear-gradient(to right, rgb(56, 0, 253) 0%, rgb(255, 0, 146) 0%, rgb(32,123,225) 50%,rgb(255, 111, 177) 120%, rgb(55, 71, 164) 120%);

2e598da5713155856a483bb847ab6842.png

上面我们都是以线性渐变为例向大家阐述了渐变中色标相关的细节,但在径向渐变和锥形渐变中色标的计算有所差异,我们先来看径向渐变为例:

background-image: radial-gradient(50% 100%, #FFFFFF 0%, #972929 34%, #3571DF 67%, #C014CF 100%);

径向渐变和线性渐变的梯度线(渐变线)略有不同,径向渐变的渐变线长度是以其半径,那么对应的百分比也是相对于其半径为基础计算:

7e9a39c34161eb2e062cddd9d44befb4.png

如果径向渐变是一个椭圆形渐变:

background-image: radial-gradient(50% 100%, #FFFFFF 50%, #972929 67%, #3571DF 83%, #C014CF 100%);

其停止颜色的百分比也是相对于其半径做计算:

b45a3a5eb47a7661d22f3c67efae5f46.png

在锥形渐变中,颜色停止就更独特一点,其渐变线是其周长,如果停止颜色的位置是百分比,那么它是相对于360deg来计算的:

background-image: conic-gradient(at 50% 50%, #FFFFFF 0%, #972929 25%, #3571DF 50%, #B60A46 75%, #3DD69F 100%);

第一个停止颜色(#ffffff)位置对应的是0deg,第二个停止颜色(#972929)位置对应的是90deg、第三个颜色(#3571df)对应的是180deg,第四个颜色(#b60a46)对应的是270deg,第四个颜色(#3dd69f)对应的是360deg:

94204d7f9d49a0cb95a95685137ebfd7.png

不管是哪种类型的CSS渐变,每个停止颜色都有相应的停止位置,即使未显式设置。当然每种渐变的停止颜色的停止位置计算方式都有所差异。

线性渐变

在Web设计中最为常见的渐变类型是 linear-gradient(),它也常称为“线性渐变”,因为该类型的渐变颜色是从左到右、从上到下、或者在一个方向上行何角度上的渐变。

线性渐变的语法规则如下:

linear-gradient() = linear-gradient([ | to ]? ,)

= [left | right] || [top | bottom]

linear-gradient()函数的第一个参数或 to 是用来指定渐变线方向,并决定停止颜色在渐变线上的停止位置。如果省略该参数,那么它的值是to bottom,即从顶部到底部。该参数接受两种方式指定的值:

:通过角度来指定渐变线的方向,它的单位可以是deg、turn、grads和rad;而且值可以是正负值,其中正值代表顺时针旋转,负值代表逆时针旋转

使用关键字:这里关键字指的是,可以是to top、to right、to bottom、to left、to top right、to bottom right、to bottom left和to top left等。如果参数是to top、to right、to bottom或to left,则渐变线的角度分别是0deg、90deg、180deg或270deg。如果参数指定了方向是某个方框的角度(比如to top left),则渐变线必须具有一定的角度,使其与指定的角相交于同一象限,并且垂直于渐变框的两个相邻角相交的直线。

我们来看一些简单的示例,以双色线性渐变在不同角度和关键词下的效果:

/* CSS */

:root {

--color-start: #09f;

--color-stop: #e52e71;

--linear-direction: to top;

}

div {

width: 100%;

height: 30vh;

border-radius: 5px;

position: relative;

background-image: linear-gradient(

var(--linear-direction),

var(--color-start),

var(--color-stop)

);

}

效果如下:

在渐变中,我们不局限于只有两种颜色!事实上,我们可以有任意多的逗号分隔的渐变色(即),比如下面这个示例,就用了四个渐变颜色:

body {

background-image: linear-gradient(to right, red, #f06d06, rgb(255, 255, 0), green);

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2021泗阳致远中学高考成绩查询,2021高考成绩什么时候发布?可通过哪些途径查询?...

3、安徽省高考成绩预计将于6月23日公布各批次录取分数线和高考成绩,考生可通过安徽省教育招生考试院自行查分;4、湖南高考成绩将于6月25日左右公布,本科不再分一二三批,考生可通过湖南教育政务网、湖南省普通高校招生考试考生综合…

python函数之作用域

python函数之作用域: >>> def times(x,y):return x*y>>> times(2,4) 8 >>> times(3.1,4) 12.4 >>> times(eop,4) eopeopeopeop >>> def inset(s1,s2):res[]for x in s1:if x in s2:res.append(x)return res>>&…

mysql数据库的字符集_mysql数据库中字符集乱码问题原因及解决

前言有的时候我们在查看数据库数据时,会看到乱码。实际上,无论何种数据库只要出现乱码问题,这大多是由于数据库字符集设定的问题。下面我们就介绍一下,数据库的字符集的设定及乱码问题的解决。mysql数据库的字符集直白的说&#x…

加强计算机网络应用,如何加强计算机网络管理技术创新应用

车煜铭摘要:在社会的发展当中,计算机网络被普遍运用,因此,令人们对计算机网络的依赖性越来越大。长久以来,大部分计算机用户渴望获得一个稳定的网络氛围。为了符合这一需求,计算机网络管理系统随之诞生。其…

python基本语句

文章目录1.赋值语句序列赋值语句:多目标赋值语句:增强赋值语句:表达式语句2.条件语句和循环语句if语句:while循环:for循环:range计数器zip函数enumerate函数1.赋值语句 >>> a1 >>> b2 &…

mysql 经典面试_这些MySQL经典面试题你要知道!

1、MySQL的复制原理以及流程(1)、复制基本原理流程1. 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中;2. 从:io线程——在使用start slave 之后,负责从master上拉取 binlog 内容&#xff…

html乱码框框,springmvc+font-awesome开发出的页面显示方框乱码的解决方法

在web.xml中配置如下:springorg.springframework.web.servlet.DispatcherServletcontextConfigLocationclasspath:conf/spring-mvc.xml2spring/default*.cssdefault*.gifdefault*.jpgdefault*.pngdefault*.jpegdefault*.jsdefault*.svgdefault*.eotdefault*.woffdef…

1主5从mysql数据库_MySQL主从复制虽好,能完美解决数据库单点问题吗?

一、单个数据库服务器的缺点数据库服务器存在单点问题;数据库服务器资源无法满足增长的读写请求;高峰时数据库连接数经常超过上限。二、如何解决单点问题增加额外的数据库服务器,组建数据库集群;同一集群中的数据库服务器需要具有…

python基本对象类型

文章目录python对象类型1.数字2.字符串3.列表4.字典5.元组6.文件7.其他核心类型python对象类型 1.数字 例子 >>> 123222 345 >>> 1.5*399 598.5 >>> 2**10 1024 >>> 3.1415*2 6.283 >>> 9.99991 10.9999 >>> import …

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏?

在任何地方找不到解决方案(我猜这一定是一个非常常见的问题).我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有200px的固定宽度并且具有未知高度.我怎样才能使主要内容区占据所有剩余的宽度,而不会有任何不当行为.最接近我的是以下内容,但问题在于侧边栏可以与页脚重叠.…

js语句连接mysql数据库_js中require()的用法----JS如何连接数据库执行sql语句或者建立数据库连接池...

var vue require(vue);引入vue的意思,commonjs的写法。node都是用require来载入模块的,可以看看webpackvue。require()可以调用模块。这不是就把vue模块命了个名吗?nodejs的写法,引入vue模块并命名为vue的意思。前端的东西&#…

(DFS)迷宫问题

题目: 从s到t,.意味着可以走,*意味着不能走,如果能走,输出路径,如果不能走,输出no。 输入: 5 6 ....S* .***.. .*..*. *.***. .T....输出: ....m* …

惠普z6计算机进不去桌面,HP Z6 桌面工作站 | HP® HK 惠普香港

Intel、Thunderbolt 及 Xeon 均為 Intel Corporation 於美國及/或其他國家或地區的商標。Microsoft 及 Windows 為 Microsoft Corporation 於美國及/或其他國家或地區的註冊商標或商標。NVIDIA 是 NVIDIA Corporation 在美國及其他國家或地區的商標及/或註冊商標。USB Type-C™…

mysql定义条件和处理_mysql sql存储过程条件定义与处理

一、条件定义DECLARE condition_name CONDITION FOR condition_valecondition_value:sqlstate[value] sqldata_value |mysql教程_error_code二、条件处理DECLARE htype HANDLER FOR cond_value[...] sp_statementhandtype_value:sqlstate [value] saltate_value|contentname|sq…

(DFS)跳马

题目: 马走日,不考虑别马脚,问马能否从S走到T,其中‘#’表示不能落下,‘.’表示能落下 输入: .#....#S# ..#.#.#.. ..##.#..# ......##. ...T..... ...#.#... ...#..... ...###... ......... .##......输…

长沙医学院学位计算机考试内容,湖南长沙医学院2017年9月计算机等级考试报名时间...

长沙医学院2017年下半年第49次全国计算机等级考试(以下简称NCRE)将于2017年9月23至25日举行。为做好本次考试报名及相关考务工作,现将有关事项通知如下:一、报名时间:2016年6月7日—2016年6月18日,逾期不接受任何理由的补报名。二…

(递推)常用递推式总结及实现

常用递推式 后面问题的解可以由前面问题的解递推而来,每一项都与前面若干项有一定关联。它是一种用若干步可以重复的简单运算来描述复杂问题的方法。 爬楼梯和兔子问题和斐波那契:f(n)f(n−1)f(n−2);f(1)1,f(2)1f(n)f(n-1)f(n-2) ; f(1)1,f(2)1 f(n)f…

mysql建表语句utf-8_mysql 创建utf-8数据集

之前数据库都是默认的‘latin1 ’,由于业务需求,需要把数据集修改为utf-8(1)创建一个新的数据库,并设置默认的格式为utf-8CREATE DATABASE IF NOT EXISTS yourdbname DEFAULT CHARSET utf8 COLLATE utf8_general_ci;(2) 将这个yourdbname 数据…

html读取servlet,简单html与servlet交互(HTML利用servlet读取txt)

1.usercheck.htmlhref"../lib/ligerUI/skins/Aqua/css/usertext.css" rel"stylesheet"type"text/css" />填写用户名/>id"verifyButton"/>>2.usertext.css.userClass {border: 1px solid red ;background-image:url(../../…

mysql dnslog_dnslog小技巧

一、dnslog利用场景主要针对无回显的情况。Sql-BlindRCESSRFRFI(Remote File Inclusion)二、原理将dnslog平台中的特有字段payload带入目标发起dns请求,通过dns解析将请求后的关键信息组合成新的三级域名带出,在ns服务器的dns日志中显示出来。三、案例展…