css CSS |描线连接属性

CSS |描线连接属性

原文:https://www.geeksforgeeks.org/css-stroke-linejoin-property/

笔划线连接属性是一个用于定义形状的内置属性，该形状用于结束笔划的开放子路径。

语法:

stroke-linejoin: miter | miter-clip | round | bevel | arcs | initial | inherit

属性值:

miter: It is used to indicate that a sharp corner would be used to join the two ends. The outer edges of the stroke are extended to the tangents of the path segments until they intersect. This gives the ending a sharp corner.

示例:

```html <!DOCTYPE html>

             CSS | stroke-linejoin property                   .stroke1 {             stroke-linejoin: miter;             stroke-width: 20px;             stroke: green;             fill: none;         }

            GeeksforGeeks
                     CSS | stroke-linejoin: miter;


```

输出:
miter-clip: It is used to indicate that a sharp corner would be used to join the two ends. The outer edges of the stroke are extended to the tangents of the path segments until they intersect.

除了另一个属性之外，它给结束一个像斜接值一样的尖角。行程限制用于确定如果斜接超过某个值是否会被修剪。它用于在非常尖锐的连接或动画上提供更好看的斜接。

示例:

```html <!DOCTYPE html>

             CSS | stroke-linejoin property                   .stroke1 {             stroke-linejoin: miter-clip;

/ setting a lower miterlimit /             stroke-miterlimit: 1;             stroke-width: 20px;             stroke: green;             fill: none;         }

.stroke2 {             stroke-linejoin: miter-clip;

/ setting a higher miterlimit /             stroke-miterlimit: 2;             stroke-width: 20px;             stroke: green;             fill: none;         }

            GeeksforGeeks

            CSS | stroke-linejoin: miter-clip;


```

输出:
round: It is used to indicate that rounded the corner would be used to join the two ends.

示例:

```html <!DOCTYPE html>

             CSS | stroke-linejoin property                   .stroke1 {             stroke-linejoin: round;             stroke-width: 20px;             stroke: green;             fill: none;         }

            GeeksforGeeks
                     CSS | stroke-linejoin: round;


```

输出:
bevel: It is used to indicate that the connecting point is cropped perpendicular to the joint.

示例:

```html <!DOCTYPE html>
             CSS | stroke-linejoin property                   .stroke1 {             stroke-linejoin: bevel;             stroke-width: 20px;             stroke: green;             fill: none;         }

            GeeksforGeeks

CSS | stroke-linejoin: bevel;



```

输出:
弧:用于表示弧角用于连接路径段。这种形状是由笔画外边缘的延伸形成的，其曲率与外边缘在连接点处的曲率相同。
initial: It is used to set the property to its default value.

示例:

```html <!DOCTYPE html>

             CSS | stroke-linejoin                   .stroke1 {             stroke-linejoin: initial;             stroke-width: 20px;             stroke: green;             fill: none;         }

            GeeksforGeeks
                     CSS | stroke-linejoin: initial;


```

输出:
继承:用于设置属性从其父级继承。