好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

這篇原本是 2015 年整理的個人愛用 CSS 語法，當時很多寫法要加 -webkit- 前綴、要顧慮舊版 IE。現在瀏覽器進步很多，這次全部更新成現在的寫法，也補上幾個近年很常用的新技巧。

開始之前：CSS 要加在哪裡？

如果是 WordPress 網站，少量的 CSS 可以直接貼在後台「外觀 → 自訂 → 附加的 CSS」，儲存後全站生效；區塊主題則在「外觀 → 編輯器 → 樣式」的選單裡找「附加的 CSS」。其他網站或其他加入方式，請看HTML 加入 CSS 的三種方法。

下面程式碼裡的 class 名稱（例如 .card）只是範例，要換成你網站實際的 class。不知道是哪個 class 時，在元素上按右鍵選「檢查」就看得到。

1. 半透明背景

.wrapper {
  background: rgb(255 255 255 / 75%);
}

斜線後面的 75% 是不透明度，數字越小越透明。舊寫法 rgba(255, 255, 255, 0.75) 也還能用，效果一樣。

要加在哪一層，依主題而不同，通常是包住整個內容的那一層（常見的名稱像 .wrapper、.site-content、.content）。

注意不要用 opacity 做半透明背景：opacity 會讓裡面的文字、圖片一起變透明。

進階：毛玻璃效果

背景半透明之外，再把後面的內容模糊化：

.glass {
  background: rgb(255 255 255 / 60%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

舊版的 Safari 只認得 -webkit- 開頭的寫法，兩行一起寫比較保險。

2. 圓角：border-radius

.card {
  border-radius: 12px;
}

.tab {
  border-radius: 0 0 12px 12px; /* 左上、右上、右下、左下 */
}

.avatar {
  border-radius: 50%; /* 正方形圖片變成圓形 */
}

寫四個值時，順序是從左上角開始順時針：左上、右上、右下、左下。

3. 只要某幾邊的邊框

舊版的寫法是左、右、下三邊各寫一行。更簡單的做法是先設定四邊，再把不要的那一邊拿掉：

.box {
  border: 2px solid #0017a6;
  border-top: 0;
}

想要漸層色或會動的邊框，可以看CSS 流動漸層邊框的寫法。

4. 陰影：box-shadow、text-shadow

.card {
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.glow {
  box-shadow: 4px 4px 12px 4px rgb(51 51 102 / 50%);
}

.hero-title {
  text-shadow: 1px 3px 5px rgb(0 0 0 / 50%);
}

• box-shadow 的數值依序是：水平位移、垂直位移、模糊程度、擴散範圍、顏色。第四個數字（擴散）加大，陰影會往外擴，看起來像光暈。
• text-shadow 沒有擴散，只有水平、垂直、模糊、顏色。疊在照片上的白色標題加一點文字陰影，會清楚很多。
• 陰影顏色用半透明的黑色，會比純灰色自然。

5. 漸層背景：不需要前綴了

.bar {
  background-image: linear-gradient(to right, #f1f1f1 0, #fff 5%, #f1f1f1 90%);
}

舊版文章另外寫了一行 -webkit-linear-gradient(...)，現在的瀏覽器都支援不加前綴的寫法，那一行可以刪掉。想做多色分段的彩色色條，請看CSS 彩色條紋的寫法。

6. 背景圖片：填滿又不變形

.banner {
  background-image: url("images/banner.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

• cover：填滿整個區塊，超出的部分會被裁掉。
• contain：整張圖都看得到，但可能留白。
• 寫固定尺寸（例如 background-size: 69px 69px;）：適合會重複排列的小花紋。

如果是 img 標籤的圖片要填滿區塊，改用 object-fit，請看CSS 圖片填滿 div 不變形。

7. 中文字型的設定順序

body {
  font-family: "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

瀏覽器會從左到右找，找到電腦裡有的字型就用：

• 英文字型放前面：英文字型裡沒有中文字，所以英文字母會用英文字型顯示，中文字再往後找中文字型，中英文各自好看。
• "PingFang TC" 是 Mac、iPhone 的蘋方體；"Microsoft JhengHei" 是 Windows 的微軟正黑體，寫英文名稱就可以。
• 最後的 sans-serif 是保底，前面都找不到時用系統預設的無襯線字。

想讓每台裝置的字型都一樣，可以用 Google Fonts 的 Noto Sans TC 這類網路字型，但中文字型檔案比較大，會多花一點載入時間。

8. 字的粗細：font-weight

h1 {
  font-weight: 900;
}

數值從 100 到 900，400 是一般、700 是粗體。字型本身要有那個粗細才看得出差別；字型沒有 900 時，瀏覽器會用最接近的粗細顯示，所以常常寫 900 看起來跟 700 一樣。

9. 隱藏元素，用對方法

• display: none;：完全消失，也不佔空間。
• visibility: hidden;：看不見，但原本的位置還留著。
• 只給螢幕報讀軟體讀（例如只有圖示的按鈕，要讓視障者知道按鈕的用途）：

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

很多 WordPress 主題已經內建 screen-reader-text 這個 class，可以直接用。

舊版文章用 display: none !important; 隱藏外掛產生的區塊。!important 偶爾用來蓋過外掛的樣式可以，用多了之後，自己的樣式也會越來越難覆蓋。

另外，不要用隱藏的方式放「只給搜尋引擎看」的文字或關鍵字，這違反 Google 的規範，可能讓網站被降低排名。

10. 寬度計算更直覺：box-sizing

*,
*::before,
*::after {
  box-sizing: border-box;
}

加了這段之後，設定 width: 300px 時，內距（padding）和邊框都算在 300px 裡面，不會越加越寬。大部分主題已經內建，自己從頭寫網頁時記得加上。

11. 固定比例：aspect-ratio

.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

嵌入的 YouTube 影片寬度填滿、高度自動維持 16:9，是做 RWD 響應式影片最省事的寫法。圖片、卡片要固定比例也可以用。

12. 字級隨螢幕自動縮放：clamp()

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

三個值分別是：最小、理想、最大。字級會跟著螢幕寬度（4vw）變化，但不會小於 1.75rem、也不會大於 3rem，手機、電腦都不用另外寫媒體查詢。

13. 錨點連結平滑捲動

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 80px;
}

• scroll-behavior: smooth：點「回到頂端」或目錄連結時，畫面會滑過去，而不是瞬間跳過去。
• scroll-margin-top：網站有固定在上方的選單時，捲動後的標題才不會被選單蓋住，數值設成選單的高度。

錨點連結的寫法，可以參考錨點連結與慢慢滾動的語法。

14. 滑過時的動態效果：transition

.button {
  background-color: #0017a6;
  transition: background-color 0.2s, transform 0.2s;
}

.button:hover {
  background-color: #2a3fd1;
  transform: translateY(-2px);
}

transition 讓顏色、位置在 0.2 秒內慢慢變化，按鈕滑過時往上浮一點點，看起來比較有質感。

15. 用 CSS 變數統一品牌色

:root {
  --brand: #0017a6;
  --radius: 12px;
}

.button {
  background-color: var(--brand);
  border-radius: var(--radius);
}

品牌色、圓角大小這些整站共用的數值，先在 :root 定義成變數，之後用 var() 取用。要改顏色時只改一個地方，全站就會一起變。

延伸閱讀

• CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法
• CSS 文字太長自動變成「…」：單行與多行省略寫法（text-overflow、line-clamp）
• CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法

把這些小技巧組合起來，現成的版型也能做出自己的風格。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計、RWD 響應式網站與網站維護託管，歡迎來聊聊。