📌  相关文章
📜  CSS | stroke-linejoin 属性(1)

📅  最后修改于: 2023-12-03 15:14:19.683000             🧑  作者: Mango

CSS | stroke-linejoin 属性

简介

CSS 的 stroke-linejoin 属性用于设置描边的两条线段相交时的形状。stroke-linejoin 属性只能用于矢量图形的描边上。

常用的取值有 miter（默认值）、round 和 bevel 三种。

语法
stroke-linejoin: miter | round | bevel;
属性值
miter

默认值，表示尖角相交。具体来说，如果两条线段相交的内角小于 180 度，那么两条线段的中心点之间就会出现一个尖角。尖角相交的情况下，line-join 的值为 miterlimit 时，两条线段的交点会被延伸直至某个限制点。

.stroke {
  stroke-linejoin: miter;
}
round

表示圆角相交。当两条线段相交时，会在交点处形成一个圆角。其他部分的描边线条仍然是直的线段。

.stroke {
  stroke-linejoin: round;
}
bevel

表示平角相交。当两条线段相交时，它们以交点处的平坦面相接。如果线条的宽度较大，相交的部分会形成一个锐角而不是平角。

.stroke {
  stroke-linejoin: bevel;
}
示例

下面是一个示例，展示了不同 stroke-linejoin 值的效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .stroke {
        stroke-width: 10;
        fill:none;
      }
      .miter {
        stroke-linejoin: miter;
      }
      .round {
        stroke-linejoin: round;
      }
      .bevel {
        stroke-linejoin: bevel;
      }
    </style>
  </head>
  <body>
    <svg width="400" height="200">
      <path class="stroke miter" d="M50,50 L150,50 L150,150 L50,150Z" />
      <path class="stroke round" d="M200,50 L300,50 L300,150 L200,150Z" />
      <path class="stroke bevel" d="M100,100 L300,100 L200,200 Z" />
    </svg>
  </body>
</html>

该示例会生成一个带三个形状的 SVG 元素，每个形状的 stroke-linejoin 值不同。结果如下图所示：

demo