本教程主要参考Google 开发者网站文章和mdn文章，经过翻译整理

本课程将 CSS 的基础知识细分为清晰易懂的片段。 在接下来的几个单元中，您将了解 CSS 的核心工作原理，以及如何在项目中有效地使用 CSS。使用带有“Learn CSS”徽标的菜单窗格可以在模块中导航。

动画是突出互动元素的好方法，可为设计增添趣味和乐趣。在本单元中，您将了解如何使用 CSS 添加和控制动画效果。

有时，您会在界面上看到一些小帮助程序，这些程序会在您点击它们时提供有关其所在部分的实用信息。这类事件通常具有闪烁的动画，让您知道相关信息就在那里，并且应该与之互动。 此模块将介绍如何使用 CSS 创建这些帮助程序和其他动画。

背景

每个 CSS 框的背后都有一个称为背景层的专用层。CSS 提供了多种方式对其进行有意义的更改，包括允许多种背景。

背景图层距离用户最远，呈现在从其 padding-box 区域开始的方框内容后面。这样可以使背景图层完全不与边框重叠。

Duotone 是一种常用的摄影颜色处理方式，它会使图片看起来仅由两种对比鲜明的颜色组成：一种用于高光，另一种用于弱光。 那么，如何使用 CSS 来做到这一点呢？

在 盒子模型模块中，我们考虑了使用帧类比来描述框模型的每个部分。

边框框是框的框架，border 属性为您提供了大量选项，供您以您能想到的几乎任何样式创建该框架。

边框属性

单个 border 属性提供了一种为边框的各个部分设置样式的方法。

假设您有这样一段 HTML：

<p>I am a paragraph of text that has a few words in it.</p>

颜色是任何网站的重要组成部分，在 CSS 中有多种颜色类型、功能和处理方式选项。

如何确定要使用哪种颜色类型？ 如何使颜色变为半透明？ 在本课程中，您将了解您可以通过哪些选项为项目和团队做出正确的决策。

CSS 具有各种不同的数据类型，例如字符串和数字。 颜色是其中一种类型，它使用其他类型（例如，数字作为自己的定义）。

数字颜色

恭喜！你看到了最后！ 到目前为止，您已经学习了很多关于 CSS 的知识，希望与之前相比，您在使用 CSS 时能够更加自如。

您可能想知道从这里可以做什么。 最好的学习方式之一就是实践学习：构建您自己的网站，检验新的 CSS 技能。 要继续构建您的 CSS 技能组合，您还可以探索下面这些资源：

其他资源

• 关于 MDN 的 CSS 文档
• 如何学习 CSS - Smashing Magazine
• CSS 技巧
• 布局区域 - YouTube

假设您需要构建一个位于图片顶部的元素，使其具有略不透明的磨砂玻璃效果。这些文字必须是实时文字，而不是图片。 该怎么做？

在自适应设计中，一种可能难以处理的设计模式是内嵌某些内容的边栏。在有视口空间时，这种模式效果很好，但如果空间是压缩的，这种僵化的布局可能会出现问题。