描边基础与跨格式呈现在 Penpot 迁移到 WebGL 渲染 时遇到了“三线问题”。当三种描边相互交织设计系统易混乱。2026 年 7 月 21 日发布的文章提到物理学三体问题表述与“三线问题”有类比性。描边即围绕图层的线可更新属性定制样式、大小和颜色[1]。在 CSS 中对应 border 属性有相关使用方式和独立属性[3]文章给出代码示例。在 SVG 中Penpot 正用 WebGL 渲染器取代原始渲染器也有样式对应写法示例[2]。三线问题详解描边根据位置分内描边、居中描边和外描边[7]。内描边完全在形状内宽度从边缘向内延伸居中描边一半在形状内一半在外外描边完全在形状外宽度从边缘向外延伸。不同格式处理方式有分歧CSS 默认内边框实现外边框或居中边框需用 outline 和 outline-offset 属性SVG 中居中描边默认实现内、外描边需裁剪和遮罩文章给出 SVG 代码示例。WebGL 渲染器中的实现Penpot 使用 Skia 库实现描边Skia 提供 SkPaint 类[4]绘制类型有 Fill、Stroke 或 StrokeFillPenpot 使用不同 Paint 及其描边方法组合[5]。正方形形状的描边实现内描边将矩形向内缩进宽度一半使描边在形状内文章给出 C 代码及示例图居中描边是 Skia 原生行为直接在矩形上绘制给出代码及示例图外描边将矩形向外扩展宽度一半使描边在形状外也有对应代码及示例图。复杂形状路径的描边实现设计中引入复杂形状如路径时内、外描边需用 Skia 其他函数默认 Skia 描边居中无需特殊处理。文章以三角形路径为例给出内、中、外描边代码实现及示例图。虚线和点线样式处理处理虚线或点线描边需用 SkPathEffect文章给出代码实现及示例图。多条描边的挑战与应对形状描边数量增加使情况复杂。Penpot 支持多边框使用 SVG 或 WebGL 渲染器时按顺序添加边框文章给出代码及示例图。CSS 无法用 border 属性支持多描边常用 box-shadow 属性变通文章给出代码及示例图还提到可能很快能在 CSS 中声明式添加多边框https://bsky.app/profile/lea.verou.me/post/3mdjbojsf6s2h。总结与展望文章面对的系统如相互环绕的天体易混乱三种描边类型、三种格式对“默认”描边定义不同且变量增加。但得益于 WebGL 渲染实现边框相关视觉元素更灵活。Penpot 还有很大空间挖掘描边功能如描边转路径、每边单独设描边三线问题探索还在继续。