通过构建城市天际线学习 CSS 变量（第 6 部分）

你好很棒的人。快速提问……为什么周末总是很短？就像周末的 24 小时是 12 小时一样。这艘船上只有我一个人吗？昨天很有趣，我有机会通过添加显示颜色如何从一种过渡到另一种的百分比、代码优化和添加新变量来更多地研究线性渐变。这些是我接下来采取的 10 个步骤：

1. 为 .bb2b 添加了一个线性渐变，它使用从 0% 到 6% 的 --building-color2 和从 6% 到 9% 的 --window-color2。渐变过渡通常会逐渐从一种颜色变为另一种颜色。您可以将更改设为实线，如下所示：

线性渐变（var（--first-color）0%，var（--first-color）40%，var（--second-color）40%，var（--second-color）80%）；

2. 从第 1 步开始，该部分顶部的颜色发生了明显的变化。继续将渐变类型从线性渐变更改为重复线性渐变。这将使渐变的四种颜色重复，直到它到达元素的底部；给它一些条纹，让我不必添加一堆元素来创建它们。

3. 从 .bb2 中删除背景颜色，因为您不再需要它。

4. 将这些 CSS 属性添加到 .bb2a 以创建建筑物的顶部。

5. 接下来，我从 .bb2a 中删除了宽度和高度，并将左边框和右边框更改为使用 5vw 而不是 1vw。

6. 接下来，我将.bb2a的两个#999改为透明。这将使左右边框不可见。

7. 从 .bb2a 中删除了 margin 和 border-top 属性和值，以将其变成建筑物顶部的三角形。

8. 最后，我将.bb2a 的border-bottom 属性从1vw 更改为5vh，并将#000 颜色更改为您的--building-color2 变量。现在它看起来像一个屋顶。

9. 去下一栋楼！在 :root 中创建了一个名为 --window-color3 的新变量，并将其值设为 #d98cb3。这将是粉红色建筑物的次要颜色。

10. 到目前为止，我创建的所有渐变都是从上到下的，这是默认方向。但是，我可以通过在您的颜色之前添加它来指定另一个方向，如下所示：

渐变类型（方向，颜色1，颜色2）；我用重复线性渐变填充了.bb3。方向使用 90 度，前两种颜色使用 building-color3，第三种颜色使用 15% 的 window-color3。注意：当没有指定颜色的距离时，它将使用有意义的值。在这种情况下，前两种颜色将默认为 0% 和 7.5%，因为它从 0% 开始，而 7.5% 是 15% 的一半。

今天是时候拉开帷幕了。谢谢阅读。请发表评论。

来源：https://onose.hashnode.dev/day-45-learning-css-variables-by-building-a-city-skyline-part-6