描邊基礎(chǔ)與跨格式呈現(xiàn)在 Penpot 遷移到 WebGL 渲染 時遇到了“三線問題”。當(dāng)三種描邊相互交織設(shè)計系統(tǒng)易混亂。2026 年 7 月 21 日發(fā)布的文章提到物理學(xué)三體問題表述與“三線問題”有類比性。描邊即圍繞圖層的線可更新屬性定制樣式、大小和顏色[1]。在 CSS 中對應(yīng) border 屬性有相關(guān)使用方式和獨立屬性[3]文章給出代碼示例。在 SVG 中Penpot 正用 WebGL 渲染器取代原始渲染器也有樣式對應(yīng)寫法示例[2]。三線問題詳解描邊根據(jù)位置分內(nèi)描邊、居中描邊和外描邊[7]。內(nèi)描邊完全在形狀內(nèi)寬度從邊緣向內(nèi)延伸居中描邊一半在形狀內(nèi)一半在外外描邊完全在形狀外寬度從邊緣向外延伸。不同格式處理方式有分歧CSS 默認內(nèi)邊框?qū)崿F(xiàn)外邊框或居中邊框需用 outline 和 outline-offset 屬性SVG 中居中描邊默認實現(xiàn)內(nèi)、外描邊需裁剪和遮罩文章給出 SVG 代碼示例。WebGL 渲染器中的實現(xiàn)Penpot 使用 Skia 庫實現(xiàn)描邊Skia 提供 SkPaint 類[4]繪制類型有 Fill、Stroke 或 StrokeFillPenpot 使用不同 Paint 及其描邊方法組合[5]。正方形形狀的描邊實現(xiàn)內(nèi)描邊將矩形向內(nèi)縮進寬度一半使描邊在形狀內(nèi)文章給出 C 代碼及示例圖居中描邊是 Skia 原生行為直接在矩形上繪制給出代碼及示例圖外描邊將矩形向外擴展寬度一半使描邊在形狀外也有對應(yīng)代碼及示例圖。復(fù)雜形狀路徑的描邊實現(xiàn)設(shè)計中引入復(fù)雜形狀如路徑時內(nèi)、外描邊需用 Skia 其他函數(shù)默認 Skia 描邊居中無需特殊處理。文章以三角形路徑為例給出內(nèi)、中、外描邊代碼實現(xiàn)及示例圖。虛線和點線樣式處理處理虛線或點線描邊需用 SkPathEffect文章給出代碼實現(xiàn)及示例圖。多條描邊的挑戰(zhàn)與應(yīng)對形狀描邊數(shù)量增加使情況復(fù)雜。Penpot 支持多邊框使用 SVG 或 WebGL 渲染器時按順序添加邊框文章給出代碼及示例圖。CSS 無法用 border 屬性支持多描邊常用 box-shadow 屬性變通文章給出代碼及示例圖還提到可能很快能在 CSS 中聲明式添加多邊框https://bsky.app/profile/lea.verou.me/post/3mdjbojsf6s2h。總結(jié)與展望文章面對的系統(tǒng)如相互環(huán)繞的天體易混亂三種描邊類型、三種格式對“默認”描邊定義不同且變量增加。但得益于 WebGL 渲染實現(xiàn)邊框相關(guān)視覺元素更靈活。Penpot 還有很大空間挖掘描邊功能如描邊轉(zhuǎn)路徑、每邊單獨設(shè)描邊三線問題探索還在繼續(xù)。