本文转载自公众号《阅读核心》（ID：AI_Discovery）作为Web开发者，CSS工具必须要掌握。但是如果不遵循正确的学习流程，你可能很难理解CSS的操作。这就是为什么一些开发人员不太了解它的原因。本文将帮助您通过两种方式学习CSS：借助专业工具编写CSS，以及通过一些交互式环境学习CSS。这些精选道具一定要收藏好！在线创作工具1.EnjoyCSS“EnjoyCSS是一款先进的CSS3生成器，用户不受常规编码的影响。”EnjoyCSS是一款极其易上手的工具，也是作者苦苦学习C??SS时的救命稻草。学习者可以使用简单的UI设计元素并提供相关的CSS输出。EnjoyCSS彻底改变了我的工作流程。由于其易用性，在创建复杂的CSS样式时可以节省时间和精力。不需要太多专业知识也能完成复杂的CSS。2.CSSmatic这个多合一的工具包括以下4个工具：噪声纹理工具：使用脏像素和噪声创建微妙的背景图案，更改颜色和值，并实时预览结果渐变生成器工具：使用多种颜色和不透明度光圈生成令人惊叹的渐变边框圆角工具：超级易于使用并节省时间，一次更改所有选定的边框以获得所需的圆角效果框阴影工具：无论是模糊半径更改、颜色更改还是阴影大小-在一个地方创建完美阴影效果所需的一切所有这些工具都有一个非常简单直观的用户界面，CSSmatic是必备工具。3.请使用CSS箭头！该工具可以帮助您创建和导出自定义框的代码，您可以随意调整自定义框的箭头方向。尽管从头开始编码听起来很复杂，但只需单击几下即可提供代码。获得代码后，您可以调试代码并进行一些微调，例如添加阴影等。来源：pinterest4。Patternizer和Patternify通过这两个工具，您可以使用CSS在易于使用的界面中创建令人惊叹的图案。借助这些工具，可以创建很酷的操作模式，并在直接用CSS编写的网站上轻松使用：PatternizerPatternifyOnlineLearningTool1.Flexplorer是一个简单的应用程序，可以让学习者使用Flexbox的各种功能，并在查看中使用它们结果连同屏幕上的代码实时显示。学习者还可以编辑框中的文本，并查看框内的布局如何响应。这种有趣的学习方式让学习变得简单轻松。2.CSSGrid该站点允许访问者参加一个四小时的关于CSSGrid基础知识的微型课程。该课程完全免费，创建者是著名的开发者——韦斯·博斯（WesBos）。这个简短的课程包含25个视频，教授CSS网格的所有基础知识。图片来源：slideshare3.GridGarden这个互动游戏促使学习者编写CSS代码来种植胡萝卜园。这种有趣的学习方式可确保学习者了解CSS网格的基础知识。游戏一共有28个关卡，每个关卡都需要编写CSS代码段才能过关。4.使用CSS的图像效果这个很酷的工具是由Flexplorer的创建者BennettFeely创建的。它非常实用，允许学习者使用CSS属性（如背景混合模式、混合混合模式和滤镜）创建令人惊叹的图像。此工具使用混合和过滤处理图像。上面介绍的CSS工具对新手也很友好~Happycoding！
