CSS 播客 - 021:渐变
假设您有一个要构建的网站 卡片是一段简介,其中包含标题、摘要和按钮。 设计师交出了一个紫色背景的设计作为片头。 唯一的问题是背景以渐变的形式呈现两种紫色。 该怎么做?
您一开始可能认为,为此,您需要从设计工具中导出一张图片,
但您可以使用
linear-gradient
。
渐变是指图片 可以在任何可以使用图片的地方使用 但它是使用 CSS 创建的,由颜色、数字和角度组成。 借助 CSS 渐变功能,您可以创建两种颜色之间的平滑渐变
线性渐变
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
linear-gradient()
函数逐步生成两种或更多颜色的图像。
它需要多个参数,但在最简单的配置下,
您可以传递一些这样的颜色,在混合的过程中,系统会自动平均分配这些颜色。
.my-element {
background: linear-gradient(black, white);
}
您还可以传递角度或表示角度的关键字。
如果您选择使用关键字,请在 to
关键字后面指定方向。
也就是说,如果您想选择黑白渐变
从左(黑色)到右(白色),
则需要将角度指定为 to right
作为第一个参数。
.my-element {
background: linear-gradient(to right, black, white);
}
定义颜色停止值,其中颜色与其相邻颜色停止和混合。 对于从深红色阴影开始 45°角的渐变, 渐变大小的 30% 时变为浅红色:看起来就像这样。
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
您可以根据需要在 linear-gradient()
中添加任意数量的颜色和颜色停止点,
您可以用英文逗号分隔各个渐变效果,将各个渐变叠加到一起。
径向渐变
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要创建以圆形方式向外辐射的渐变色,
radial-gradient()
来帮忙。
它类似于 linear-gradient()
,
不过,您还可以选择指定位置和结束形状,而不是指定角度。
如果您仅指定颜色,radial-gradient()
会自动将位置选为 center
然后根据方框的大小选择圆形或椭圆形。
.my-element {
background: radial-gradient(white, black);
}
渐变的位置类似于使用关键字和/或数值的 background-position
。
径向渐变的大小决定了渐变的结束形状的大小
(圆形或椭圆形),默认为 farthest-corner
,
也就是说,它正好与方框最远的一角相交。
您还可以使用以下关键字:
closest-corner
将与最接近渐变中心的角相交。closest-side
将与最靠近渐变中心的方框一侧相交。farthest-side
会执行与closest-side
相反的操作。
与 linear-gradient
一样,您可以根据需要添加任意数量的颜色停止点。
同样,您也可以根据需要添加任意数量的 radial-gradients
。
圆锥渐变
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
圆锥渐变在框中有一个中心点,从顶部开始(默认) 并绕着这个 360 度圆圈旋转
.my-element {
background: conic-gradient(white, black);
}
conic-gradient()
函数接受 position 和 angle 参数。
默认情况下,角度为 0 度,从顶部(顶部)中心开始。
如果将角度设为 45deg
,则角度为右上角。
angle 参数接受任何类型的角度值,例如线性渐变和径向渐变。
默认情况下,位置为中心。 与径向和线性渐变一样 排名可以基于关键字 也可以使用数值进行定义
与其他渐变类型一样,您可以根据需要添加任意数量的颜色停止点。 对于使用圆锥渐变,此功能的一个良好用例是使用 CSS 渲染饼图。
重复和混合
每种渐变类型也有重复类型。
这些是
repeating-linear-gradient()
、
repeating-radial-gradient()
和
repeating-conic-gradient()
。
它们与非重复函数类似,并采用相同的参数。
不同之处在于,如果可以重复定义的渐变以填充方框,
就会出现这种错误
如果渐变效果没有重复
则表示您可能没有为其中一个颜色停止点设置长度。
例如:
您可以用 repeating-linear-gradient
创建条纹背景,只需设置颜色停止长度即可。
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
您还可以在 background
属性中混合使用梯度函数,
还可以根据需要定义任意数量的梯度
就像使用背景图片时一样
例如,您可以将多种线性渐变混合在一起,或将两种线性渐变与径向渐变混合在一起。
资源
- Conic.css - 实用的圆锥梯度集合
- 有关梯度的 MDN 指南
- 渐变生成器
检查您的理解情况
测试您对梯度的掌握情况
创建渐变色至少需要多少种颜色?
元素是否可以有多个渐变作为背景?