CSS径向渐变

当我们谈论渐变时，值得一开始的事实是渐变是CSS中的图像替换。 这是一种怪异的说法，即在CSS中创建渐变可为浏览器提供在屏幕上绘制图像的说明，而不是向浏览器提供您在图像编辑应用程序（例如Photoshop或Sketch）中创建的文件的源URL。 这是在代码中执行相同操作的本机CSS方式，因此，渐变包含在CSS图像值和替换内容规范中 。

径向渐变与线性渐变的不同之处在于，它从一个点开始并向外散发。 渐变通常用于模拟光源，我们知道它并不总是笔直的。 这使它们对使颜色之间的过渡看起来更加自然很有用。

默认设置是第一种颜色从元素的center center位置开始，然后逐渐向元素的边缘逐渐淡出为结束颜色。 无论哪个方向，淡入淡出均以相等的速率发生。

径向渐变的源从中心向外移动。

句法

在CSS的background或background-image属性中使用了radial-gradient()表示法。 当我们记得渐变基本上是CSS时，从总体上讲，CSS可以创建图像，否则我们将在图像编辑软件中制作出该图像，并将其放置在背景属性上。

官方语法

以下是官方规范概述径向渐变语法的方式：

<radial-gradient> = radial-gradient(
  [ [ <shape> || <size> ] [ at <position> ]? , |
    at <position>, 
  ]?
  <color-stop> [ , <color-stop> ]+
)

将其翻译成基本英语可能会有所帮助：

嘿，元素！ 在一些尺寸 ，其位于这些位置画在某些形状中的放射渐变 。 噢，并确保它这个颜色开始，在这个颜色停止。

价值观

radial-gradient表示法接受上面指出的以下值：

• shape ：确定从一种颜色到另一种颜色向外过渡时渐变的形状。 由于我们在谈论径向渐变，因此形状实际上仅限于圆形。 我们可以省略该值，并且符号将测量元素的边长，以确定一个值是否与情况更好地匹配。 例如，一个完美正方形的元素将非常适合circle而任何矩形都适合ellipse 。
  • circle
  • ellipse
• size ：通过获取shape值并根据形状的中心指示渐变应在何处结束来影响渐变的最终形状。 可以用名称或长度的精确度量来表示。
  • closest-side ：渐变将在最接近图形中心的那一端结束。 如果双方都符合此标准，则它将平均分配。
  • farthest-side （默认）：与closest-side相反，渐变将在距形状中心最远的一侧结束。
  • closest-corner ：渐变将在与形状中心最接近的角处结束。
  • farthest-corner （ farthest-corner相反的closest-corner ，其中渐变结束于距形状中心最远的角。
  • <length> ：我们可以指定一个数值作为圆的半径。 必须以正像素或相对单位表示。 抱歉，不允许使用负单位或百分比，因为负圆将是真空，并且百分比可以相对于任意多个周围的值。
  • <length> or percentage ：可以提供第二个数字值来声明椭圆的显式尺寸，而不是圆形。 同样，负值是一个禁忌，但百分比是公平的游戏，因为大小是相对于渐变框而不是元素而言的。
• position ：这与在background-position上的工作方式非常相似。 这意味着top ， right ， left和center都可以在这里工作，以及提供两个命名值（例如top center ）的组合。 我们还可以使用数字值（包括百分比）来指定确切位置，所有这些值均相对于元素的边界框。 默认为center center 。
• color-stop ：这些是定义渐变的颜色值。 此处接受任何颜色值，包括十六进制，命名的RGB和HSL。

用法

这就是最基本的样子。 请注意，我们并未声明shape> ， size ， position或color-stop值，它们全部默认为将渐变放置在元素的正中央并在声明的颜色值之间均匀过渡的值。

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen blcqw 。

您可以看到该渐变如何假定shape为ellipse 。 那是因为元素本身不是一个完美的正方形。 在那种情况下，它会假设是一个circle 。 很聪明！ 如果我们明确声明circle为shape值，将会发生以下情况：

.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );
}

请注意，渐变是圆形的，但仅沿最远的边缘一直淡入到最终颜色。 现在，我们可以显式声明position值，以确保渐变以shape的“最近侧”结束，如下所示：

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      yellow,
      #f06d06
    );
}

请参阅CodePen上的Chris Coyier （ @chriscoyier ）的Pen EFyvp 。

可能的值包括： closest-corner ， closest-side ， farthest-corner ， farthest-side 。 您可以这样想：“我希望这个径向渐变从中心点到__________逐渐消失，其他任何地方都可以填充以适应这种情况。”

径向渐变也不必从默认中心开始，您可以通过将“ at ______ ”用作第一个参数的一部分来指定某个点，例如：

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      #f06d06
    );
}

通过在示例中添加一个正方形并调整一个color-stop我将在这里变得更加明显：

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen iuaDL 。

浏览器支持

浏览器对radial-gradient()支持与linear-gradient()大致相同。 唯一的例外是Opera的较旧版本。 就在他们开始支持渐变时，他们只考虑了线性而不是径向。

但是类似于linear-gradient() ，如果您的浏览器支持需要更深入，那么您可以考虑使用Autoprefixer或类似的工具来为您处理供应商前缀，而不必自己进行管理。

该浏览器支持数据来自Caniuse ，其更多信息。 数字表示浏览器支持该版本及更高版本的功能。

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
10 *	36	10	12	TP

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
81	68	4 *	14.0

其他资源

• CSS图像值和替换的内容模块级别4 ：表示法的官方规范。 CSS渐变是在第3级中引入的，径向渐变在今天的第4级工作草案中一直保持不变。
• MDN Docs ： Mozilla开发人员网络对功能和规范的解释，并带有示例。
• 掌握CSS3渐变 ： Lea Verou在2011年的演讲中仍然是很棒的资源。

翻译自: https://css-tricks.com/snippets/css/css-radial-gradient/