CSS 多重描邊文字效果：疊層 text-stroke 的實作原理
yuanchuan.dev · 2026-05-07
CSS 的 -webkit-text-stroke 屬性只接受單一數值，讓傳統印刷中常見的多層描邊文字效果難以直接實現。設計師 yuanchuan 近日發表技術文章，示範透過疊加多個絕對定位元素並逐層設定不同的 text-stroke-width，在純 CSS 環境下重現這種復古排版效果，無需借助 SVG 或 Canvas。
核心改動
突破在於讓每一層的描邊寬度遞進變化。公式大致為 $em(.08n + .02(1 - (-1)^n))——奇偶層步進量略有差異，製造出內縮的視覺層次。顏色透過 CSS 自訂屬性交替指定，奇數層前景色、偶數層背景色，讓每一圈描邊都像在前一圈上雕刻出輪廓。Z-index 管理確保最內層文字顯示在最上方。實作時搭配 css-doodle 框架批量生成重複元素，避免手寫大量雷同的 CSS 宣告。
規格細節
渲染引擎間存在明顯差異：Firefox 採用平滑輪廓演算法，產出比 Chrome 和 Safari 更柔和的描邊線條；Chrome 傾向保留字形邊緣尖角。這種不一致源自各引擎對 -webkit-text-stroke 規格詮釋的歧異，CSS 規範目前並未強制統一渲染行為，字型選擇對最終效果的影響也相當顯著。
效能是主要限制：每增加一個描邊層就新增一個合成層，字體尺寸超過 100px 時容易出現重繪閃爍，不適合動畫或捲動場景。作者建議將應用範圍限定在靜態展示或 CSS 生成藝術；生產環境的高流量頁面標題應改用 SVG <text> 搭配多個 stroke 屬性達到同等效果。
影響範圍
瀏覽器支援率約 85%，Chrome、Safari、Edge 均已原生支援 -webkit-text-stroke，Firefox 雖未正式規範但在所有穩定版本中預設啟用。此技術零 JavaScript 依賴，對需要快速重現設計稿描邊效果的場景提供低成本選項，惟大型部署前應評估效能與跨瀏覽器一致性的取捨。
CSS 捲動驅動動畫完整指南：animation-timeline 規格與 view() 用法
joshwcomeau.com · 2026-05-07
CSS 捲動驅動動畫將 @keyframes 的播放進度與捲動位置直接掛鉤，無需任何 JavaScript。Josh Comeau 近日發布深度教程，系統整理 animation-timeline、animation-range 等屬性，以及 scroll() 和 view() 兩個時間軸函式的完整使用方式，目前全球瀏覽器支援率已達約 85%。
規格細節
animation-timeline 指定動畫的驅動來源：scroll() 追蹤整個頁面（或指定捲動容器）的捲動百分比，view() 則追蹤單一元素在 viewport 中的可見進度，從元素開始進入 viewport 記為 0%、完全離開記為 100%。兩者均可透過參數指定捲動軸方向（block、inline）以及捲動容器（nearest、root、自訂元素）。
animation-range 縮窄動畫觸發區間，常用值包括：
cover（預設）：元素開始進入至完全離開 viewport 期間contain：元素完全可見的區段entry/exit：僅在進入或離開 viewport 時播放- 自訂百分比：
animation-range: entry 20% exit 80%
緩動函式（timing functions）完整適用，包括 cubic-bezier 和 linear() 彈簧曲線，讓捲動進度映射到動畫幀的關係可以是非線性的。
核心改動
進階功能 Linked Timelines 允許一個元素的捲動進度驅動另一個元素的動畫：在滾動元素上設定 view-timeline: --my-tl，再在目標元素以 animation-timeline: --my-tl 引用。若兩元素不在同一 DOM 子樹，需在共同祖先或 :root 上設定 timeline-scope: --my-tl 擴展作用域。
影響範圍
Chrome、Edge、Safari 已完整實作；Firefox 透過 layout.css.scroll-driven-animations.enabled flag 啟用，官方 polyfill 存在但不支援 Linked Timelines。此 API 消除了大量 Intersection Observer + requestAnimationFrame 模板程式碼，對常見的元素淡入出現、捲動進度條等效果，現在可直接以純 CSS 取代，不影響主執行緒。