纯 css 无法精确绘制独立、不闭合、可定向的弧线，仅能通过 border-radius 裁角或 clip-path 裁椭圆实现；前者僵硬但兼容好，后者灵活但 safari/ie 支持有限；真正按角度精控需用 canvas arc()。
纯 CSS 画不出「独立、不闭合、可精确定向」的弧线，比如一段从 (100, 50) 到 (200, 80) 的 60° 圆弧。你真正能做的，只有两种：用 border-radius 截圆角，或用 clip-path 裁剪椭圆/圆形——前者快但僵硬，后者灵活但兼容性有代价。
border-radius 画弧的本质是“裁边”
它不是在画弧，而是在一个矩形上，给四个角分别套上四分之一圆（或椭圆）的「盖子」。只要把不需要的部分用透明/隐藏边框「抹掉」，视觉上就只剩一段弧。
-
border-radius: 0 0 50% 50%/0 0 100% 100%配合border-top: none，能切出下半圆；border-radius: 50% 50% 0 0/100% 100% 0 0+border-bottom: none是上半圆 - 关键在「斜杠 /」后两个值：它控制垂直方向的椭圆压缩比。比如
border-radius: 0 0 50% 50%/10% 10% 90% 90%会让下半弧更扁平 - 别指望用
border-radius控制起始/终止角度——它只认「哪个角+多大半径」，角度是推导出来的，不是输入的 - 常见翻车：设了
border-radius却没隐藏对应边框（如画左上弧忘了加border-bottom: none; border-right: none;），结果多出两条直线边
clip-path ellipse() 是最接近「真弧」的纯 CSS 方案
当你需要上下/左右对称的半圆、1/4 圆，或可控位置的椭圆弧段时，clip-path: ellipse() 比伪元素 + border-radius 更干净、更易维护。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 语法：
clip-path: ellipse(50px 30px at 100px 80px)表示「水平半径 50px、垂直半径 30px、中心在 (100px, 80px) 的椭圆」，只显示该椭圆覆盖区域 - 要切下半圆？写成
clip-path: ellipse(100px 50px at 100px 50px)，再让容器height: 50px、overflow: hidden，或直接用clip-path: inset(0 0 0 0 round 0 0 50px 50px) - 注意：Safari 15.4+ 才支持
ellipse()的at语法；旧版 Safari 和 IE 完全不支持clip-path - 别把
clip-path和mask混用——前者裁剪形状，后者靠 alpha 通道遮罩，性能和行为完全不同
canvas arc() 是唯一能按角度/半径/方向精确画弧的方案
如果设计稿里明确写了「起始角 45°、终止角 135°、半径 60px、顺时针」，那就别挣扎了，上 canvas。
-
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)中的startAngle和endAngle必须是弧度值，Math.PI / 4是 45°，不是45 - 画完记得调用
ctx.stroke()或ctx.fill()，否则什么也看不到 - 想让弧线带透明效果？别设
rgba()填充色，而是用ctx.globalAlpha = 0.7控制整层透明度，避免重绘干扰 - 响应式场景下，
canvas的宽高必须用 JS 动态设置canvas.width/canvas.height属性，仅改 CSS 尺寸会导致图形模糊
真正难的不是怎么画，而是判断该用哪一种：要动效和交互动态改弧度？选 canvas；只要静态装饰弧、且需兼容 IE？死守 border-radius + 边框隐藏；设计师给的是 SVG 路径？直接内联 <svg><path d="..."></path></svg>，比所有 CSS 折腾都靠谱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
