← 首页 / CSS 里的 Path：一条路径的四种用途 待审核 7 页

CSS 里的 Path：一条路径的四种用途

M 10 10 L 90 90 这种「画笔移动记录」源自 SVG,CSS 后来直接采用了它 —— 于是有了一整类形如 path 的属性值:path()、新一代的 shape(),加上 circle() / polygon() / inset() 等 <basic-shape> 函数。

同一种「形状值」,交给不同属性就是完全不同的能力:给 clip-path 是裁剪、给 shape-outside 是文字环绕、给 offset-path 是运动轨道、给 d 直接改写 SVG 路径本体。本系列把这种「值」与它的四个「消费者」逐个拆开演示。不需要 SVG 基础 —— path 微语言本身就是第一页的内容。

同一套「形状值」交给不同属性即不同能力:clip-path 接受 <basic-shape> 全部函数(含 path() / shape())、geometry-box、url(#clipPath),做裁剪(形状外透明);shape-outside 接受 circle() / ellipse() / inset() / polygon() 与 <image> + shape-image-threshold,做 float 的文字环绕轮廓;offset-path 接受 path() / shape() / ray() / url() 与 basic-shape、coord-box,当运动轨道;d 只接受 path(),改写 SVG <path> 的形状本体(可过渡变形)。mask-image 常与 clip-path 并提,但它的输入是图像(按 alpha 逐像素调整透明度),不接受 path 值 —— 在 clip-path 页对照。 path data · 微语言

读懂 "M 10 10 L 90 90":path 微语言

一切的地基：path 字符串是一支画笔的移动记录。M 落笔、L/H/V 直线、C/S/Q/T 贝塞尔、A 椭圆弧、Z 闭合，大写绝对坐标 / 小写相对坐标。逐命令单步走一遍心形 / 五角星 / 波浪，当前段加粗、控制点拉出辅助线，配全命令速查表。

 basic-shape · 值类型

<basic-shape>:CSS 的八个形状函数

不想写 path 串，CSS 也提供了现成的形状函数：inset() / rect() / xywh() 三种矩形、circle() / ellipse()、任意多边形 polygon()，再加上接受 path 串的 path() 与 shape()。逐个切换、拖滑块调参数，实时看裁剪效果与生成的 CSS，并实测当前浏览器支持哪几个。

 clip-path · 裁剪

clip-path 进阶：fill-rule、参照盒、url() 与形状动画

裁剪的细节都在这页：自交五角星上看 nonzero vs evenodd 怎么决定「星心有没有洞」；换参照盒 border-box / padding-box / content-box / margin-box;url(#clipPath) + objectBoundingBox 让形状随盒子缩放；以及 clip-path 的过渡插值规则。末尾对照 clip vs mask。

 shape() · 响应式 path

shape()：能用 %、calc() 和 var() 的 path

path() 的坐标是固定的无单位像素，盒子一变形状就错位。shape() 把每个 path 命令改写成 CSS 语法 (from / line to / curve to … with / arc to … of / close)，坐标可以用 %、px、calc()、var()。两张「票券」并排拖宽度，看 path() 版保持原尺寸、shape() 版的半圆缺口始终对齐中线。

 shape-outside · 环绕

shape-outside：让文字沿形状流动

float 元素默认把文字挡出一个矩形，shape-outside 把这个轮廓换成圆、椭圆、多边形——文字真的贴着弧线排。再看 shape-margin 推开一圈、用渐变图像当轮廓 + shape-image-threshold 挑 alpha 阈值，以及「环绕轮廓 ≠ 可见形状」——得配 clip-path 才表里如一。

 offset-path · 轨道

offset-path:path 当运动轨道

同一条 path 交给 offset-path，元素就被「穿」在路径上，offset-distance 是它在轨道上的里程——拖滑块手动控制里程，offset-rotate 决定元素是否朝向前进方向。再换 circle() 轨道、从一点出发的 ray() 射线，最后用 CSS animation 让它连续运动。

 d · SVG 形变

d：连 SVG 的路径本体都成了 CSS 属性

SVG 的 d="…" 其实是个 presentation attribute——CSS 里直接写 d: path("…") 就能改写，于是 :hover / 媒体查询 / transition 全都用得上。折线图两组数据间平滑变形、blob 悬停鼓包，讲清形变的前提：命令序列结构一致。

 一条主线:「形状」在 CSS 里被抽成了可复用的值类型,而不是某个属性的私有语法。所以掌握一遍 path 微语言 + basic-shape 函数,就同时覆盖了裁剪、环绕、运动轨道、SVG 形变四种用法 —— 这正是 web.dev 把它们放在同一章讲的原因。

相关链接

  • CSS Shapes Module Level 1 drafts.csswg.org 规范本体:定义 shape-outside 与 <basic-shape> 值类型 (circle/ellipse/inset/polygon/path/shape 等)。
  • Motion Path Module Level 1 w3.org offset-path / offset-distance / offset-rotate 的规范本体:把 path 当运动轨道这条线的出处。
  • Can I use · CSS clip-path caniuse.com clip-path 的实时浏览器支持矩阵 (含 basic-shape / url() 引用各自的支持差异)。
  • Can I use · CSS Shapes (shape-outside) caniuse.com shape-outside / shape-margin / shape-image-threshold 的实时浏览器支持矩阵。
  • Learn CSS · Paths, shapes, clipping and masking web.dev 本系列的「命题来源」:一章串起 path / basic-shape / clip-path / mask。
  • MDN · clip-path developer.mozilla.org clip-path 全部取值 (basic-shape / geometry-box / url) 与兼容性表。
  • MDN · <basic-shape> developer.mozilla.org 形状值类型本体:八个函数的语法与插值规则。
  • MDN · shape() developer.mozilla.org 新一代响应式 path:命令语法、与 path() 的对照、浏览器支持。
  • MDN · SVG Paths 教程 developer.mozilla.org path data 微语言的官方入门:M/L/C/Q/A/Z 逐个讲。
  • Clippy — clip-path maker bennettfeely.com 经典在线工具:拖顶点生成 polygon() / circle() / inset(),可直接取用。
  • CSS Wavy Divider Generator css-generators.com 生成波浪 / 锯齿边:调参数即导出一长串 smooth to 采样点的 shape() (或 mask),shape-fn 页那种密集波形的现成来源。
  • Squircle Path Kit msurguy.github.io 生成 Figma 风格 squircle (超椭圆平滑圆角) 的 path data:smoothing 参数从纯圆角过渡到 iOS 图标那种圆润超椭圆,输出既能填进 SVG 的 d、也能当 clip-path 裁图。