最後更新：2026/10/15
網站的常見問題，寫得越完整，客人越放心；可是十幾題全部攤開，一整頁都是字，客人滑兩下就放棄了。比較好的做法是只顯示問題，客人點了想看的那一題，答案才展開。這種「點一下展開」的設計，叫做摺疊，也常被叫做手風琴。
以前要做摺疊，得用外掛或寫一段 JavaScript。現在 WordPress 內建兩個區塊就能做，再加一點 CSS 讓它好看。這篇順便整理三種常用的框線效果：漸層框線的卡片、會轉的光框按鈕、點進去會變色的表單欄位。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress。我想照下面這篇文章，把常見問題做成點一下才展開的摺疊樣式，並且加上漸層框線卡片、光框按鈕和表單框線效果。
請先問我：我用的是哪一個佈景主題、網站的主色是什麼、常見問題大概有幾題。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
常見問題摺疊：先用 WordPress 內建的區塊
WordPress 有兩個區塊可以做摺疊，不用寫程式就能用：
「開闔式內容」區塊（WordPress 6.9 之後才有）。插入後，一個區塊裡可以放很多題，每一題有標題和內容。區塊設定裡有「自動關閉」，打開之後，客人點開一題，前一題會自動收起來，畫面不會越拉越長。另外可以選要不要「顯示圖示」，「圖示位置」可以靠左或靠右。每一題（開闔式內容項目）也有「預設開啟」，讓那一題一進來就是打開的。我們在測試站打開自動關閉，點開第一題、再點第二題，第一題自動收起。
「詳細資料」區塊，一個區塊就是一題：上面一行是問題，下面放答案。如果希望一次只開一題，選取每一題的區塊，在「進階設定」裡的「名稱屬性」填同一個名字，例如 faq。同名的詳細資料區塊，一次只能開一個。想讓某一題一進來就是打開的，打開那一題的「預設開啟」。
兩個都好用。「開闔式內容」功能比較多，樣式跟著佈景主題；「詳細資料」比較單純，每一題都是瀏覽器內建的摺疊元素，用 CSS 改樣子比較好控制。下面的 CSS 是給「詳細資料」用的。
網路上也有很多「純 CSS 手風琴」的範例，是把一個隱藏的勾選框藏在標題裡，用勾選狀態控制展開。那是瀏覽器還沒有內建摺疊元素時的做法，現在不需要了。內建的摺疊元素，鍵盤按 Tab 就能選到、按 Enter 就能開關，讀螢幕軟體也知道它是可以展開的，這些用勾選框做的版本都要另外處理。
摺疊的樣式：外框、加號、慢慢展開
先把所有問題的「詳細資料」區塊放進一個「群組」區塊，選取群組，在「進階設定」的「附加的 CSS 類別」填 mimi-faq。這樣 CSS 只會影響這一組常見問題，網站其他地方不受影響。接著把下面的 CSS 貼到「附加的 CSS」：
/* 常見問題摺疊 */
.mimi-faq details {
border: 1px solid #e3ddd5;
border-radius: 10px;
margin-bottom: 12px;
background: #fff;
}
.mimi-faq details[open] {
border-color: #c98b5e;
}
.mimi-faq summary {
position: relative;
padding: 16px 52px 16px 20px;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.mimi-faq summary::-webkit-details-marker {
display: none;
}
.mimi-faq summary::after {
content: "+";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5em;
line-height: 1;
transition: transform 0.2s;
}
.mimi-faq details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.mimi-faq summary:focus-visible {
outline: 3px solid #c98b5e;
outline-offset: 2px;
border-radius: 10px;
}
.mimi-faq details > :not(summary) {
margin: 0;
padding: 0 20px 16px;
}
/* 打開時慢慢展開（支援的瀏覽器才有，不支援的直接打開） */
@supports (interpolate-size: allow-keywords) {
.mimi-faq {
interpolate-size: allow-keywords;
}
.mimi-faq details::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.3s, content-visibility 0.3s allow-discrete;
}
.mimi-faq details[open]::details-content {
block-size: auto;
}
}這段 CSS 做了幾件事：
- 每一題變成一張圓角卡片，打開的那一題外框換成主色。顏色
#c98b5e換成你網站的主色。 - 拿掉瀏覽器預設的小三角形（
list-style: none給大部分瀏覽器，::-webkit-details-marker給 Safari），右邊改放一個「+」，打開時轉 45 度變成「×」。 :focus-visible是用鍵盤選到問題時出現的外框，滑鼠點的時候不會出現。不要把它拿掉，用鍵盤瀏覽網頁的人要靠它知道自己在哪裡。- 最後一段讓答案慢慢展開，不是一下子跳出來。這是比較新的 CSS 寫法，外面包了
@supports，瀏覽器支援才會有動畫，不支援的瀏覽器就是直接打開，功能完全一樣。
我們在測試站用 Chrome 看：電腦和手機寬度都沒有跑版；點開一題，答案在 0.3 秒內慢慢展開；同名的三題一次只開一題；用鍵盤按 Tab 選到問題，出現主色的外框，按 Enter 可以開關。
漸層框線的卡片
推薦方案、重點服務，常會用一張有框線的卡片框起來。單色框線很常見，漸層框線比較搶眼：
/* 漸層框線卡片 */
.mimi-gradient-card {
border: 3px solid transparent;
border-radius: 16px;
padding: 24px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #f0a35e, #d1495b, #6a4c93) border-box;
}用法是在一個「群組」區塊的「附加的 CSS 類別」填 mimi-gradient-card，把標題、文字、按鈕放進去。
CSS 有一個 border-image 可以直接做漸層框線，但它和圓角不能一起用，框線會變回直角。這裡的做法是疊兩層背景：底層是漸層，鋪滿到框線的位置（border-box）；上層是白色，只鋪到框線內側（padding-box）。框線本身是透明的，露出底層的漸層，看起來就是一圈漸層框線，圓角也正常。卡片的底色不是白色的話，把 #fff, #fff 換成你的底色。
會轉的光框按鈕：只給最重要的那一顆
一圈顏色沿著按鈕外框繞著轉，非常吸睛，所以只適合用在一頁裡最重要的一顆按鈕，例如「立即預約」。每一顆都轉，客人就不知道該看哪裡了。
/* 會轉的光框按鈕：只給最重要的一顆按鈕 */
@property --mimi-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.mimi-glow .wp-block-button__link {
border: 3px solid transparent;
border-radius: 999px;
background:
linear-gradient(#222, #222) padding-box,
conic-gradient(from var(--mimi-angle), #f0a35e, #d1495b, #6a4c93, #f0a35e) border-box;
color: #fff;
animation: mimi-spin 4s linear infinite;
}
@keyframes mimi-spin {
to {
--mimi-angle: 360deg;
}
}選取「按鈕」區塊，在「附加的 CSS 類別」填 mimi-glow。原理和漸層卡片一樣是兩層背景，只是底層換成一圈的圓錐漸層；@property 讓瀏覽器知道 --mimi-angle 是一個角度，動畫才能讓它從 0 度慢慢轉到 360 度。我們在測試站量了兩次按鈕的角度，間隔 0.7 秒，角度確實在變。
表單欄位：點進去時換框線顏色
聯絡表單的欄位，點進去時框線換顏色，客人清楚知道現在在填哪一格：
/* 表單輸入框：點進去時換框線顏色 */
.mimi-form input[type="text"],
.mimi-form input[type="email"],
.mimi-form input[type="tel"],
.mimi-form textarea {
border: 1px solid #cfc7bd;
border-radius: 8px;
padding: 10px 12px;
}
.mimi-form input:focus,
.mimi-form textarea:focus {
border-color: #d1495b;
outline: 3px solid rgba(209, 73, 91, 0.3);
outline-offset: 1px;
}把表單（不管是表單外掛的短代碼，還是自己寫的 HTML）放進一個「群組」區塊，群組的「附加的 CSS 類別」填 mimi-form。
我們第一版的寫法，平常狀態用了 input:not([type="checkbox"]):not(...) 這種很長的選擇器，結果點進去框線顏色沒有變。原因是 CSS 的「權重」：選擇器越長、越具體，權重越高，平常狀態的規則權重比點進去的規則還高，就蓋過去了。改成現在這樣，兩組規則權重一樣，寫在後面的「點進去」才會生效。CSS 沒有反應的時候，先想想是不是被別的規則蓋掉了。
點進去的外框用 outline 加一圈半透明的顏色，不要直接 outline: none 拿掉。拿掉之後，用鍵盤填表單的人就看不出現在在哪一格。
照顧不喜歡動畫的人
有些人在手機或電腦的設定裡打開了「減少動態效果」，動畫會讓他們頭暈或分心。最後這段讓這些人看到的是靜態的版本：
/* 不喜歡動畫的人：全部停掉 */
@media (prefers-reduced-motion: reduce) {
.mimi-faq summary::after,
.mimi-faq details::details-content {
transition: none;
}
.mimi-glow .wp-block-button__link {
animation: none;
}
}我們用 Chrome 模擬「減少動態效果」：常見問題點了直接打開，沒有展開動畫；光框按鈕停住不轉，框線還在。
這些 CSS 要貼在哪裡
這篇所有的 CSS 都貼在同一個地方：區塊佈景主題在「外觀 > 編輯器 > 樣式」的「附加的 CSS」，傳統佈景主題在「外觀 > 自訂 > 附加的 CSS」。貼的位置和「附加的 CSS 類別」怎麼填，〈網站的方案價目表怎麼做〉有步驟說明。我們在測試站就是把 CSS 存在區塊佈景主題的「附加的 CSS」裡測的。
效果是配角
摺疊讓常見問題好讀，框線讓重點被看見，兩者都是在幫內容。如果框線多到每一張卡片都在發光，就沒有重點了。動畫怎麼用才不會太花，可以參考〈網頁動畫怎麼用才不會太花？〉；常見問題要寫哪些，〈網站有人看卻沒人聯絡？〉的第 15 個要素有說明。
如果你想要一個常見問題、方案、預約按鈕都設計好的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，畫面和互動都會照你的品牌設計。MIMI 提供臺北網頁設計服務，臺北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
