https://benzhub.github.io/tags/%E9%82%8A%E6%A1%86/Recent content in 邊框 on BenzHubHugozh-TWMon, 17 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/017-borders/Mon, 17 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/017-borders/<blockquote> <p>上一篇替版面上好了「面」與「光」，這一篇替每個區塊「描邊、圓角、分隔」。<strong>TailwindCSS</strong> 的邊框系統涵蓋 <code>border</code>（佔空間的邊框）、<code>rounded</code>（圓角）、<code>ring</code>（不佔空間的焦點環）、<code>outline</code>（輪廓）與 <code>divide</code>（子元素分隔線）五大類。v4 對這套系統動了幾刀——<code>border</code> 預設色改成 <code>currentColor</code>、<code>ring</code> 預設寬度從 3px 降為 1px，還新增了獨立的 <code>inset-ring-*</code> 內側環。這一篇會帶你把邊框、圓角與分隔線做得又俐落又有層次。</p> </blockquote>