渐变

CSS 播客 - 021：渐变

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

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

您一开始可能认为，为此，您需要从设计工具中导出一张图片， 但您可以使用 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 属性中混合使用梯度函数， 还可以根据需要定义任意数量的梯度 就像使用背景图片时一样 例如，您可以将多种线性渐变混合在一起，或将两种线性渐变与径向渐变混合在一起。

资源

检查您的理解情况

测试您对梯度的掌握情况

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

1
再试一次！
2
颜色可以相同，但显示为纯色，不过您需要提供至少 2 种颜色。
3
再试一次！
4
再试一次！

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

正确
background-image 属性允许使用多种渐变效果，只需使用英文逗号进行分隔即可。
错误
哦，但他们可以！