Learning Objectives
- 用 background-color、background-image 設定背景，並以 background-size、position、repeat 控制背景圖
- 寫出 linear-gradient 與 radial-gradient，說明漸層為什麼要放在 background-image
- 用 border 的粗細、樣式、顏色畫出邊框，用 border-radius 做出圓角、膠囊形與正圓
- 用 box-shadow 與 text-shadow 加上陰影，說出各個數值的意思
- 分辨 opacity 與 rgba 的差別，並說明背景上的文字為什麼要注意對比
用 CSS 畫出區塊的層次
同樣的文字放在白底上，和放在有背景圖、圓角、淡淡陰影的卡片裡，讀者會覺得後者「是一個可以點的東西」或「是一則獨立的公告」。 背景、邊框與陰影的工作，就是讓區塊之間的層次看得出來。
這些效果全部交給 CSS，不要做成圖片：
| 做成圖片 | 用 CSS 寫 |
|---|---|
| 圖片裡的文字搜尋引擎讀不到，螢幕閱讀器也唸不出來 | 文字仍然是 HTML 文字 |
| 改一個顏色要重新做圖 | 改一行 CSS |
| 放大會模糊，檔案也大 | 任何解析度都清晰 |
這一課的範例顏色使用平台的藍綠色系 #3C6F9A、#3C938A。
背景色與背景圖
.hero {
background-color: #1e3a52; /* 背景色 */
background-image: url("mountains.svg"); /* 背景圖，畫在背景色上面 */
background-repeat: no-repeat; /* 預設是 repeat：圖片比區塊小時會重複鋪滿 */
background-size: cover; /* 圖片的大小 */
background-position: center; /* 圖片對齊的位置 */
}
| 屬性 | 常用的值 | 說明 |
|---|---|---|
background-repeat |
repeat（預設）、no-repeat、repeat-x、repeat-y |
小圖案鋪成底紋時用 repeat |
background-size |
auto（預設，原始大小）、cover、contain、100% auto |
見下方 |
background-position |
center、top right、50% 30% |
圖片放在區塊的哪裡；裁切時決定保留哪一部分 |
cover 與 contain 都會保持圖片的比例，差別在比例不同時怎麼處理：
| 值 | 圖片縮放到 | 結果 |
|---|---|---|
cover |
剛好蓋滿整個區塊 | 沒有空白，但圖片的上下或左右會被裁掉 |
contain |
剛好整張放進區塊 | 圖片完整，但區塊可能留下空白（沒設 no-repeat 會重複鋪） |
橫幅、封面這類「要填滿」的地方用 cover 加 center；圖示、標誌這類「不能被裁」的用 contain。
背景圖只是裝飾。有意義的圖片（照片、圖表）要用 <img> 並寫 alt（第 5 課），背景圖沒有替代文字，螢幕閱讀器看不到。
可以用簡寫 background 一次寫完，例如 background: #1e3a52 url("mountains.svg") center / cover no-repeat;（size 寫在 position 後面，用斜線隔開）。
漸層：linear-gradient 與 radial-gradient
漸層不需要圖片檔，由瀏覽器依你給的顏色算出來：
/* 線性漸層：方向，接著兩個以上的顏色 */
background-image: linear-gradient(to right, #3C6F9A, #3C938A);
background-image: linear-gradient(149deg, #3C6F9A, #3C938A); /* 角度：0deg 朝上、90deg 朝右，順時針 */
background-image: linear-gradient(#3C6F9A 0%, #3C938A 60%, #ffffff 100%); /* 指定每個顏色的位置 */
/* 放射漸層：從中心向外 */
background-image: radial-gradient(circle, #e4f3f0, #3C938A);
- 沒寫方向時，linear-gradient 預設是
to bottom（由上到下）。 - 漸層在 CSS 裡算是一種圖片，所以要寫在
background-image（或簡寫background）。寫成background-color: linear-gradient(...)是無效的，瀏覽器會忽略整行。 - background-image 可以用逗號寫好幾層，寫在前面的疊在上面。在照片上加一層半透明的深色漸層，是讓白字讀得清楚的常見做法：
background-image:
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), /* 上層：半透明的黑 */
url("mountains.svg"); /* 下層：照片 */
邊框與圓角
border 的簡寫有三個值：粗細、樣式、顏色。
border: 2px solid #3C6F9A; /* 粗細、樣式、顏色，順序可以換 */
border-left: 4px solid #3C938A; /* 只畫一邊，常用在引言或提醒框 */
border-bottom: 1px dashed #cbd2d9;
樣式常用 solid（實線）、dashed（虛線）、dotted（點線）。樣式的預設值是 none：
只寫 border: 2px #333; 而沒有寫樣式，邊框不會出現。
border-radius 讓四個角變圓，有沒有邊框都可以用（背景也會跟著變圓）：
| 寫法 | 效果 |
|---|---|
border-radius: 12px; |
四個角都是半徑 12px 的圓角 |
border-radius: 12px 12px 0 0; |
只有上面兩個角（左上、右上、右下、左下） |
border-radius: 999px; |
左右兩端是半圓的膠囊形，常用在按鈕與標籤 |
border-radius: 50%; |
寬高相等的盒子變成正圓（頭像）；寬高不同會變成橢圓 |
小測驗：背景、漸層與邊框
寫了 background-color: linear-gradient(to right, #3C6F9A, #3C938A);，畫面上沒有漸層。原因是？
寫了 border: 2px #333;，邊框沒有出現。最可能缺了什麼？
想把一張 80×80 的頭像做成正圓，該怎麼寫？
橫幅 1200×300，背景圖是 800×800 的正方形。設定 background-size: cover 會怎樣？
陰影：box-shadow 與 text-shadow
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* ↑ ↑ ↑ ↑
水平位移 垂直位移 模糊半徑 顏色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12); /* 逗號隔開，可以疊好幾層 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* inset：陰影畫在盒子裡面 */
box-shadow: 0 0 0 3px rgba(60, 111, 154, 0.4); /* 第四個值是擴散：只有擴散沒有模糊，就像一圈外框 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 文字的陰影：水平、垂直、模糊、顏色 */
- 陰影不佔空間，不會改變盒子大小，也不會推開旁邊的元素；有 border-radius 時，陰影也跟著變圓。
- 陰影的顏色用半透明的黑（例如
rgba(0, 0, 0, 0.15)），看起來比純灰色自然。 - 陰影太深、太多層會讓畫面髒亂；同一個網站的卡片用同一種陰影，看起來才一致。
透明度：opacity 與 rgba，以及文字的對比
兩種寫法都會「變透明」，但範圍不同：
| 寫法 | 誰變透明 |
|---|---|
opacity: 0.6; |
整個元素連同裡面的文字、圖片、子元素一起變淡；子元素沒辦法把自己改回不透明 |
background-color: rgba(255, 255, 255, 0.6); |
只有背景半透明，文字維持原本的顏色 |
rgba() 的第四個值是不透明度（alpha），0 是完全透明、1 是完全不透明；新的寫法 rgb(255 255 255 / 60%) 意思相同。
想要「半透明的底、清楚的字」，用 rgba 的背景，不要用 opacity。
背景上的文字要有足夠的對比。W3C 的無障礙指引 WCAG 2.2 的 AA 等級要求：一般文字與背景的對比至少 4.5:1， 大字（18pt 以上，或 14pt 以上的粗體）至少 3:1。把文字放在照片或漸層上時，最亮的那一塊也要達到這個對比； 加一層半透明的深色漸層、或把文字放在不透明的色塊上，是常見的解法。對比怎麼計算與檢查工具，第 24 課會詳細介紹。
小測驗：陰影、透明度與對比
一張卡片設了 opacity: 0.5，想讓卡片裡的標題完全不透明，對標題寫 opacity: 1 有用嗎？
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 的 4px 與 12px 分別是？
白色的一般文字放在一張淺色照片上，依 WCAG 2.2 AA，文字與背景的對比至少要多少？
重點整理
background-color是背景色；background-image: url(...)是背景圖，預設會重複鋪滿。background-size: cover保持比例蓋滿（會裁切）、contain保持比例整張放進（會留白）；background-position決定對齊與裁切的位置。- 漸層
linear-gradient、radial-gradient是一種圖片，要寫在background-image；多層背景寫在前面的疊在上面。 border三個值是粗細、樣式、顏色，沒寫樣式就不會出現；border-radius: 50%讓正方形變正圓，999px做出膠囊形。box-shadow依序是水平、垂直、模糊、擴散、顏色，不佔空間；text-shadow是文字的陰影。opacity讓整個元素連內容一起變淡；只要背景半透明就用rgba()。- 背景上的文字要有足夠對比：一般文字 4.5:1、大字 3:1（WCAG 2.2 AA）。
下一課講定位：讓元素離開一般的排列，疊在別的元素上面，例如卡片角落的標籤、固定在畫面上方的頁首。