樣式設定

文字顏色

重點：
設定文字顏色與透明度，是可讀性的核心項目。

設定項目

• 文字顏色
• Alpha
• 響應式

註解：
先確定一般狀態的文字對比，再調整 hover 色可減少返工。

文字陰影

重點：
「文字陰影」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 文字陰影（開啟/關閉）
• 顏色
• Blur
• Horizontal
• Vertical
• 響應式

註解：
背景較複雜時，先增加垂直陰影再調整模糊，效果更自然。

邊框

重點：
「邊框」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 邊框（開啟/關閉）
• 顏色 + Alpha
• 寬度
• Style（none / solid / dashed / dotted）
• Box Sizing（border-box / content-box）
• 響應式

註解：
border-box 較容易維持尺寸一致，避免不同狀態下跳動。

圓角

重點：
「圓角」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 使用個別設定
• 圓角
• 左上 / 右上 / 右下 / 左下
• 單位（px / % / em / rem）
• 響應式

註解：
單獨調角時，請同步檢查 hover 狀態避免圓角變形突兀。

內陰影

重點：
「內陰影」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 內陰影（開啟/關閉）
• 顏色
• Blur
• Horizontal
• Vertical
• Spread
• 響應式

註解：
內陰影通常適合低強度使用，過強會讓按鈕顯得凹陷過度。

陰影

重點：
「陰影」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• Shadow（開啟/關閉）
• 顏色 + Alpha
• Blur
• Horizontal
• Vertical
• Spread
• 響應式

註解：
外陰影主要用於浮起感，建議與背景亮度一起調整。

透明度

重點：
「透明度」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 不透明度
• 混合模式
• 響應式

註解：
透明度變更會連動整體可讀性，建議與文字對比一起檢查。

轉場

重點：
「轉場」為此區主要設定重點。

影響：
會影響前台可讀性與操作體驗。

調整建議：
建議先用預設值建立基準，再逐步微調。

設定項目

• 持續時間 (ms)
• 延遲時間 (ms)
• 緩動
• 自訂值
• 重設

註解：
樣式轉場建議與圖示/背景轉場節奏接近，可提升整體一致感。