技能测试：背景与边框

本技能测试的目的是评估你是否完全理解了 CSS 中的背景和边框教程的内容。

备注： 你可以在下面的互动编辑器中尝试解决方案。然而，下载代码并使用在线工具，如 CodePen、jsFiddle 或 Glitch 来完成任务可能会有所帮助。

如果你遇到了困难，那就向我们寻求帮助吧——见本页面底部的评估或进一步帮助部分。

任务 1

在这个任务中，我们希望你能为一个页面的标题添加背景、边框和一些简单的样式：

  1. 令这个盒子的边框宽度为 5px，且为黑色实心（solid）的，圆角半径为 10px。
  2. 添加背景图片（使用 balloons.jpg URL），调整它的大小，令其覆盖整个盒子。
  3. 给予 <h2> 一个半透明的黑色背景颜色，并使文本为白色。

你的最终结果看起来应该如下图所示：

图片显示了一个有照片背景的盒子，圆形的边框和半透明的黑色背景上的白色文字

尝试更新下面的实时代码，重现完成的示例：

下载这项任务的初始代码，在你自己的编辑器或在线编辑器中完成测试。

任务 2

在这个任务中，我们希望你为一个装饰性的盒子添加背景图片、边框和其他一些样式：

  • 给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
  • 标题使用 star.png 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
  • 确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。

你的最终结果看起来应该如下图所示：

图片显示了一个在左上角和右下角有圆角蓝色边框的盒子。文字的左边有一颗星星，右边有 3 颗星星

尝试更新下面的实时代码，重现完成的示例：

下载这项任务的初始代码，在你自己的编辑器或在线编辑器中完成测试。

评估或进一步帮助

可以在互动编辑器中完成上面的练习。

如果你期望对练习结果进行评估，或者遇到困难需要帮助，可以：

  1. 可借助 CodePen、jsFiddle、Glitch 等在线编程实用工具完成任务。在那里你可以自行编写代码，也可以使用上文中所给的初始代码。
  2. 在 MDN 论坛学习区发帖寻求他人的评估和帮助。你发表的文章应包括：
    • 一个描述性的标题，比如“Assessment wanted for backgrounds and borders skill test 1”。
    • 讲清你已经做出的努力，以及需要我们做什么，比如你遇到了困难并需要帮助，或者期望得到评估。
    • 一个链接指向你需要得到评估或帮助的实例，步骤 1 中三个在线编程工具之一均可。我们对希望得到帮助但由不提供代码的求助也很无奈。
    • 一个链接指向 MDN 测试的原始页面，在那里我们可以找到你需要获得帮助的原始信息。