技能测试：背景与边框

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

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

如果你遇到了困难，可以通过沟通渠道联系我们。

任务 1

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

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

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

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

html

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 0.5em;
}

css

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

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

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

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

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

html

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  width: 300px;
  padding: 0.5em;
}

css

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}