stroke-linecap

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费额度!

CSS 中的 stroke-linecap 属性用于设置 SVG 形状边框的起点和终点。

.module {
  stroke-linecap: round;
}

记住

  • 覆盖演示属性 <path stroke-linecap="square" ... />
  • 不会覆盖内联样式,例如 <path style="stroke-linecap: square;" ... />

stroke-linecap 属性可以接受以下值

  • butt(默认):以 90 度锐角结束笔触
  • square:类似于 butt,但它将笔触扩展到路径长度之外
  • round:添加半径,以 stroke-width 控制的半径来平滑起点和终点

查看 CodePen 上的示例:stroke-linecap 属性 由 CSS-Tricks (@css-tricks) 创建。

相关

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
9+ 4.4+