https://benzhub.github.io/tags/%E9%99%B0%E5%BD%B1/Recent content in 陰影 on BenzHubHugozh-TWTue, 18 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/018-shadows-effects/Tue, 18 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/018-shadows-effects/<blockquote> <p>上一篇替版面描好了「邊」與「角」，這一篇替每個區塊點上「光」。<strong>TailwindCSS</strong> 的陰影與效果系統涵蓋 <code>shadow-*</code>（盒陰影）、<code>shadow-&lt;color&gt;</code>（彩色陰影）、v4 全新的 <code>inset-shadow-*</code>（內側陰影）與 <code>text-shadow-*</code>（文字陰影），再加上 <code>opacity</code>（不透明度）、<code>mix-blend-mode</code>（混合模式）與 <code>bg-blend-*</code>（背景混合）。這些工具是打造卡片層次、發光按鈕、玻璃擬態與品牌視覺的核心。v4 對這套系統動了幾刀——盒陰影刻度整體平移、新增 <code>inset-shadow-*</code> 與 <code>text-shadow-*</code>、陰影顏色可直接用 <code>/</code> 透明度修飾符。這一篇會帶你替扁平的版面加上最關鍵的一層立體感。</p> </blockquote>