昨天聊到 LocalStorage / SessionStorage，今天回到前端設計，想分享一下我在專案裡 美化首頁 About Keshi 區塊 的過程。
之前的首頁 About 區塊其實很簡單，單純就是一段文字，所以今天我就幫這個區塊加了一些 排版 + 字體 + 顏色，讓整個頁面更有質感。

新增的程式碼

我在 CSS 加入了以下樣式來美化 About 區塊：

/* About 區塊 */
#aboutContent {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(255, 255, 255, 0.05); /* 半透明黑色 */
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  line-height: 1.8;
}

• max-width: 900px; → 控制寬度，不會過度延伸，讓排版更有一致感。
• background: rgba(255, 255, 255, 0.05); → 使用半透明黑底，讓文字區塊與背景分開，但仍保留一點背景視覺效果。
• border-radius: 20px; → 圓角設計，避免死板方框。
• box-shadow → 加上陰影，讓整塊內容有浮起來的感覺。

/* About 標題 h2 美化 */
#aboutContent h2 {
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 15px;
  position: relative;
  color: #4fc2df; /* 跟主標題一致的藍色 */
  letter-spacing: 1px;
}

• color: #4fc2df; → 採用與網站主題一致的藍色，整體風格更統一。
• letter-spacing: 1px; → 微調字距，讓文字更易讀。

/* 標題左邊色條 */
#aboutContent h2::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #4fc2df, #1a1a2e);
  border-radius: 3px;
}

• 用 ::before 做了一個「垂直色條」，在標題左側，讓標題更突出。
• linear-gradient → 藍色到深色的漸層，看起來更有層次感。

/* 內文文字 */
#aboutContent p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #e0e0e0;
  text-align: justify; /* 讓文字左右對齊 */
}

• text-align: justify; → 文字左右對齊，排版感覺更正式。
• color: #e0e0e0; → 使用淺灰色文字，讓字體在黑色半透明背景上更清晰。

畫面展示

改變前

改變後