一個酷炫的盒子

在本評估中，您將獲得更多練習，透過嘗試建立一個引人注目的盒子來建立酷炫的盒子。

先決條件 在嘗試本評估之前，您應該已經完成了本模組中的所有文章。
目標 測試對 CSS 盒模型和其他盒相關功能（如邊框和背景）的理解。

起點

要開始評估，您應該

  • 製作開始的本地副本 HTML 和 CSS - 將它們儲存為 index.html 和 style.css 在一個新目錄中。

或者，您可以使用線上編輯器，例如 CodePen、JSFiddle 或 Glitch。您可以將 HTML 貼上到其中一個線上編輯器中並填寫 CSS。

注意：如果您遇到困難，可以在我們的 溝通渠道 中聯絡我們。

專案簡介

您的任務是建立一個酷炫的、花哨的盒子，並探索我們使用 CSS 可以做的事情。

一般任務

  • 將 CSS 應用於 HTML。

樣式化盒子

我們希望您對提供的 <div> 進行樣式化，使其具有以下特點

  • 一個適合大型盒子的合理寬度，大約 200 畫素。
  • 一個適合大型盒子的合理高度，同時垂直居中文字。
  • 將盒子水平居中。
  • 將盒子內的文字居中。
  • 稍微增加字型大小，大約 17-18 畫素的計算樣式。使用 rem。寫一個關於您如何計算值的註釋。
  • 設計的基色。將此顏色作為盒子的背景色。
  • 與文字形成對比的顏色以及黑色文字陰影。
  • 一個相當微妙的邊框半徑。
  • 一個 1 畫素的實線邊框，顏色類似於基色，但稍微深一點。
  • 一個線性半透明黑色漸變，朝向右下角。在開始時完全透明，沿 30% 漸變到大約 0.2 的不透明度，並保持相同顏色直到結束。
  • 多個盒子陰影。給它一個標準的盒子陰影，使盒子看起來稍微從頁面上抬起。另外兩個應該是內嵌盒子陰影 - 在左上角有一個半透明的白色陰影，在右下角有一個半透明的黑色陰影 - 增加了盒子漂亮的 3D 提升效果。

提示和技巧

示例

以下螢幕截圖顯示了完成的設計可能的樣子

A big red box with rounded corners. White text with drop shadow reads 'this is a cool box'.