本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
如果你正好想给你的页面添加炫酷的颜色,那么此篇文章将会帮助你如何实现。
一、初识 CSS 渐变
CSS 渐变是image
类型的一种特殊类型用gradient
表示,由两种或多种颜色之间的渐进过渡组成。
三种渐变类型:
- 线性:由
linear-gradient()
函数创建 - 径向:由
radial-gradient()
函数创建 - 圆锥:由
conic-gradient()
函数创建
ps:还可以使用 repeating-linear-gradient()
和repeating-radial-gradient()
函数创建重复渐变。
渐变可以在任何使用image
的地方使用,例如在背景中。
二、CSS 线性渐变
2.1 介绍线性渐变
-
说明
- 要创建线性渐变,只需指定两种颜色即可,这些被称为色标,至少指定两个色标,还可以设置起点和方向(或角度)以及渐变效果。
-
语法
-
background-image: linear-gradient(direction(方向), color1(颜色值), color2(颜色值), ...); 复制代码
-
2.2 线性渐变应用
2.2.1 线性渐变 - 从上到下(默认)
-
代码示例
2.2.2 线性渐变 - 从左到右
2.2.3 线性渐变 - 对角线
2.2.4 线性渐变 - 设置角度
-
说明
- 如果你想要更精确地控制渐变的方向,你可以给渐变设置一个具体的角度。
- 在使用角度的时候,
0deg
代表渐变方向为从下到上,90deg
代表渐变方向为从左到右,诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
-
代码示例
2.2.5 线性渐变 - 使用多个色标
2.2.6 线性渐变 - 重复线性渐变
-
说明
repeating-linear-gradient()
函数用于重复线性渐变。
-
代码示例
三、CSS 径向渐变
3.1 介绍径向渐变
-
说明
- 径向渐变类似于线性渐变,不同的地方是径向渐变从中心点向外辐射。
- 可以指定该中心点的位置,还可以将它们设为圆形或椭圆形。
-
语法
-
background-image: radial-gradient(shape(设置形状,默认为椭圆形), size(最远角), position(中心), color1(颜色值), color2(颜色值)); 复制代码
-
3.2 径向渐变应用
3.2.1 径向渐变-均匀间隔的色标(默认)
-
代码示例
3.2.2 径向渐变-不同间距的色标
3.2.3 径向渐变-设置形状
-
代码示例
3.2.4 径向渐变-设置渐变的中心
-
说明
- 可以使用关键字、百分比或绝对长度、长度和百分比值重复来定位渐变的中心(如果只有一个),否则按照从左到右的位置顺序。
-
代码示例
3.2.5 径向渐变-重复径向渐变
四、CSS 圆锥渐变
4.1 介绍圆锥渐变
-
说明
- 圆锥渐变类似于径向渐变,两者均为圆形,并使用元素的中心作为色标的源点。
- 它是围绕中心点按照扇形方向进行旋转的渐变。
-
语法
-
background-image: conic-gradient(from angle(表示起始的角度,默认为从上到下) at position(设置圆锥中心点的位置), start-color(定义开始颜色), stop-color(定义结束颜色)) 复制代码
-
4.2 圆锥渐变的应用
4.2.1 圆锥渐变-顺时针方向旋转(默认方式)
-
代码示例
4.2.2 圆锥渐变-设置渐变的中心点
4.2.3 圆锥渐变-使用多个色标
4.2.4 圆锥渐变-重复圆锥渐变
五、CSS 渐变补充知识
5.1 创建实线
-
说明
- 要在两种颜色之间创建一条硬线,即创建一个条纹而不是逐渐过渡,可以将相邻的颜色停止设置为相同的位置。
-
代码示例
5.2 使用透明度
-
说明
- 如需添加透明度,我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)。
- 也可以使用
transparent
参数,代表全透明。
-
代码示例
结尾
感谢阅读,看完本篇文章一定要自己动手实践一下,实践才是真理嘛。