探讨一下，在CSS、Figma 和 Sketch 中的渐变角度设置原理

我使用过不同的程序设计并编写了许多CSS样式。尽管现在直接从 Figma 复制渐变的 CSS 代码很容易，但我总觉得图形程序中的渐变行为与使用 CSS 创建的渐变有些不同。尤其是渐变的角度有时对我来说更像是一个随机的产物。复制CSS代码往往会导致实现效果与设计图出现明显差异。

我一直在深入挖掘，本片内容，我将分析在 CSS、Figma 或 Sketch 中为渐变分配角度时到底发生了什么。如果你也对此感兴趣，那么......继续阅读。但提醒一下，本文将涉及一些三角函数。

一、CSS中的渐变角度设置原理

基本语法

渐变在 CSS 中已经存在了十多年。一开始，实现它们非常具有挑战性，因为每个浏览器都使用自己的语法规则。如今，幸运的是，高级浏览器已经统一了规范，做一个CSS 渐变没之前那么高大上了。举几个例子：

linear-gradient(#f09, #3023AE, #0ff)

如果仅指定颜色，则渐变从上到下运行。例如，可以通过将颜色值前面的方向作为方向来更改：to top right

linear-gradient(to top right, #f09, #3023AE, #0ff)

现在，渐变从元素的左下角延伸到右上角。梯度的角度由单元的大小决定。对于正方形，这导致角度正好为 45 度。如果元素的纵横比发生变化，则渐变的角度将调整为对角线的角度。例如，纵横比为 2：1 会导致角度约为 26.5 度。

您可以看到，沿中间色标延伸的轴正好位于与 CSS 中定义的对角线相反的对角线上（左下角到右上角）。我们将在下一部分中仔细研究这一点。

由于此处的角度取决于元素的宽度，因此在为按钮定义渐变时应小心。不同的宽度很容易导致外观不均匀。特别是如果您希望渐变与设计中的其他线平行。

自主定义渐变角度

除了从侧面或对角，还可以指定一个精确的角度：

linear-gradient(36deg, #f09, #3023AE, #0ff)

我们一步一步来看背后的原理：首先，我们画一个垂直轴，把它旋转36度。我们称之为梯度轴。

接下来，我们绘制最接近梯度轴的矩形的对角线。在我们的例子中，这是从左下角到右上角的对角线。在这个对角线上，我们放置给定的色点 - 粉红色为 0%，紫色为 50%，青色为 100%。

我们现在快到了。只缺少三条线，它们穿过给定的色点，并且与渐变轴正交。我将它们称为颜色停止轴（注意：这些线与矩形的对角线不是正交的！

在两个外部色标轴与渐变轴的交点处，现在是渐变的起点和终点。

最后，可以绘制渐变。我们可以看到它正好以指定的角度运行，但在外边缘可以看到在 0 和 100 处定义的一小部分颜色。

如果你是数学方面的学霸，你可能已经看到对角线、渐变轴和外色止点轴形成了一个直角三角形。应用泰勒斯定理，我们可以在这个三角形周围画一个圆。如果我们在剩下的三个角重复整个过程，我们会得到一个让人想起花朵的图形。当渐变旋转时，其端点沿着该花形状的外线延伸。很酷，对吧？？

现在让我们再看一下按钮。首先是上面的版本，为了进行比较，具有固定角度的相同按钮。这只是一个微妙的差异。

II. sketch中的渐变角度设置原理

现在，当我们尝试在 Sketch 中重新创建相同的过程时，它是什么样子的？首先，您必须处理这样一个事实，即无法在 Sketch 中为渐变指定确切的角度。因此，让我们从一个正方形开始，然后将渐变从一个角拖到另一个角。这样我们就可以确定它的角度为 45 度。幸运的是，智能对齐在这里有效，因此很容易击中确切的角落。

结果是可以通过两种方式使用 CSS 重新创建的渐变。通过或通过 .to top right``45deg

现在，当我们将正方形拉伸到其宽度的三倍并将结果与相应的 CSS 声明进行比较时，它变得非常有趣：

是不是感觉有点头大。 这里重要的是 ，这两个CSS选项的行为都不像在Sketch中那样。 Sketch 中的渐变角度约为 71.5 度（如果您真的感兴趣：这是 3/1 的弧切）。在版本中，角度约为 18.5 度（即 90 - 71.5 或 1/3 的弧切）。to-top-right

在 Sketch 中，渐变轴保持在对角线上，而在 CSS 中，渐变轴被调整，使颜色停止轴平行于相对的对角线。

最后，在版本中，我们有一个（惊喜）45度的角度。如果要在 Sketch 中重现此渐变，则需要将渐变的端点放置在渐变轴和色标轴的交点处。这仅在您不再调整对象大小时才有效。45deg

III. Figma 渐变角度设置原理

最后，让我们来看看 Figma 中的情况。同样，我们从正方形开始，从一个角到另一个角绘制渐变。

同样在这种情况下，我们将正方形放大到其宽度的三倍，以便能够将结果与两个 CSS 版本进行比较。

事实上，看起来 Figma 的行为与 CSS 版本完全相同。至少在当前示例中是这样的。不幸的是，这并不总是正确的。Figma 将创建的渐变视为像素图形并对其进行扭曲。因此，梯度的角度也会发生变化。如果我们从一个 3：1 的矩形开始，用渐变填充它，然后将其缩小为正方形，这一点就变得很清楚了。to top right

变化的角度在 Figma 中由一个容易忽略的小点显示。如果要更改此角度，则必须在按住 Option-key 的同时移动此点。不幸的是，我不知道为什么距离也可以改变。

四、结语

我们可以看到，使用 Figma 或 Sketch 设计的渐变色，通过CSS 实现 的几乎是不可能的（至少在角度不是 90 倍数的渐变中）。在 Figma 中唯一可以重现的是从一个角到另一个角的渐变。但同样，你必须确保首先创建一个正方形，用渐变填充它，然后将正方形扭曲为所需的大小。

因此，下次在你盲目地将给定的CSS属性复制到你的代码中之前，最好检查一下结果是否真的像你想象的那样。当你在做的时候，也要看看色标，检查它们的位置是否正确，或者你是否可以完全不用百分比值。