解码 CSS 艺术 (🎨+💻)

背景故事警报！！

刚加入 Twitter 时，我偶然发现了一些发布 CSS 插画的人，当时我既好奇又困惑。直到一个月后，我才开始深入研究 CSS 并开始尝试，最终感觉自己对 CSS 艺术有了足够的理解。在这篇文章中，我尝试列出我学到的所有重要知识点以及一些我经常使用的资源。

CSS 艺术到底是什么？🤔

制作 CSS 艺术归结为使用 CSS 属性操纵 HTML 元素（主要是 div 或 spans）的形状，并通过使用 CSS 定位将它们粘合在一起使它们看起来像您想要的样子。

跟上我的思路了吗？好的，现在我们来看看我在创作 CSS 艺术作品时最常用的一些 CSS 属性，以及一些希望能帮助你更好地理解它们的资源。

边界半径

此属性可帮助我们将原本矩形的 div 或 span 元素的角变成圆角。下图中，我尝试向您概述此属性的工作原理。

通过这些数字，我们告诉 CSS 要绕过给定的角，每条边需要多少。

这是一个有助于直观地了解 border-radius 工作原理的工具：8 点边框半径

弹性盒子

我大量使用弹性盒来使元素居中，并方便元素定位。在下图中，我为右侧容器应用了 flex display、column flex-direction、justify-content center 和 align-items center。这样做可以省去不使用弹性盒时必须进行的额外定位，就像左侧容器那样。

我个人是从Freecodecamp课程中学习 Flexbox 的。以下是一些其他非常有用的工具，可以帮助我更好地掌握 Flexbox：
1) Paul Trone 的 Flexbox 可视化工具
2) Flexbox froggy

剪辑路径

Clip-path 几乎可以帮我们创建任何想要的多边形。使用它，我们可以在 div 或 span 上指定想要显示的区域，而不是显示整个矩形。Bennett
Feely 的 Clip-path 制作工具是一款非常方便的工具，我经常用它来可视化和操作这个属性。

视口尺寸

我最近意识到，可以使用视口尺寸（vw、vh、vmin、vmax）来使插图具有响应式效果。视口尺寸帮助我们根据视口宽度或高度来声明长度。其中最重要的是vmin单位，至少在 CSS 艺术领域中是如此。
它帮助我们根据视口宽度和视口高度中的最小值来声明 HTML 元素的宽度和高度。这样，我们就可以确保无论在什么设备上查看插图，它看起来都完全相同。

相对定位和绝对定位

当我们为 HTML 元素赋予相对定位时，我们会相对于元素本身移动它。但当我们谈论绝对定位时，我们会相对于其父元素定位元素。在这种情况下，父元素应该具有相对定位。
下图说明了我所说的内容。
如果我在 CSS 样式表中为内部框添加right:10px;，则结果会根据内部框是相对定位还是绝对定位而有所不同。