渐变

假设您有一个要构建的网站 卡片是一段简介,其中包含标题、摘要和按钮。 设计师交出了一个紫色背景的设计作为片头。 唯一的问题是背景以渐变的形式呈现两种紫色。 该怎么做?

由深紫色到浅紫色的渐变背景,包含标题、段落和链接。

您一开始可能认为,为此,您需要从设计工具中导出一张图片, 但您可以使用 linear-gradient

渐变是指图片 可以在任何可以使用图片的地方使用 但它是使用 CSS 创建的,由颜色、数字和角度组成。 借助 CSS 渐变功能,您可以创建两种颜色之间的平滑渐变

线性渐变

浏览器支持

  • Chrome:26。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:7. <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() 中添加任意数量的颜色和颜色停止点, 您可以用英文逗号分隔各个渐变效果,将各个渐变叠加到一起。

径向渐变

浏览器支持

  • Chrome:26。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:7. <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

圆锥渐变

浏览器支持

  • Chrome:69。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:83。 <ph type="x-smartling-placeholder">
  • Safari:12.1. <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 属性中混合使用梯度函数, 还可以根据需要定义任意数量的梯度 就像使用背景图片时一样 例如,您可以将多种线性渐变混合在一起,或将两种线性渐变与径向渐变混合在一起。

资源

检查您的理解情况

测试您对梯度的掌握情况

创建渐变色至少需要多少种颜色?

3
1
4
2

元素是否可以有多个渐变作为背景?

正确
错误