測試您的技能：背景和邊框

本技能測試旨在評估您是否理解CSS 中盒子的背景和邊框。

注意：您可以嘗試在本頁的互動式編輯器或線上編輯器（如CodePen、JSFiddle或Glitch）中進行嘗試。

如果您遇到問題，可以在我們的交流渠道中與我們聯絡。

任務 1

在本任務中，我們需要您為頁面標題新增背景、邊框和一些簡單的樣式。

  1. 為盒子新增一個 5px 的黑色實線邊框，邊框圓角為 10px。
  2. 新增背景圖片（使用 URL balloons.jpg），並將其大小調整為覆蓋整個盒子。
  3. 為<h2>新增一個半透明的黑色背景顏色，並將文字顏色設定為白色。

最終效果應如下圖所示。

Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.

嘗試更新下面的即時程式碼來重現完成後的示例。

下載本任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。

任務 2

在本任務中，我們需要您為一個裝飾性盒子新增背景圖片、邊框和其他一些樣式。

  • 為盒子新增一個 5px 的淺藍色邊框，並將左上角圓角設定為 20px，右下角圓角設定為 40px。
  • 標題使用star.png圖片作為背景圖片，左側有一個居中的星星，右側有一個重複的星星圖案。
  • 確保標題文字不會覆蓋圖片，並且要居中 - 您需要使用之前課程中學習的技術來實現這一點。

最終效果應如下圖所示。

Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.

嘗試更新下面的即時程式碼來重現完成後的示例。

下載本任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。