css CSS |笔画缓冲器属性

CSS |笔画缓冲器属性

原文:https://www . geesforgeks . org/CSS-stroke-dash array-property/

笔划缓冲器阵列属性用于设置用于 SVG 形状笔划的虚线和间隙的图案。值越大，表示破折号越多。可以在数组参数中指定不同的值来更改模式。

语法:

stroke-dasharray: <dasharray> | none

属性值:

dasharray: It is used to set the pattern with a list of values separated by commas or white space. The values can be both in terms of length units or percentages that specify the dashes and gaps in the pattern.

示例 1: 设置线中虚线的密度。

```html <!DOCTYPE html>
       CSS | stroke-dasharray property           .stroke1 {       stroke-dasharray: 20;

stroke: green;       stroke-width: 20;     }

.stroke2 {       stroke-dasharray: 40;

stroke: red;       stroke-width: 20;     }

.stroke3 {       stroke-dasharray: 80;

stroke: orange;       stroke-width: 20;     }

    GeeksforGeeks
       CSS | stroke-dasharray

```
输出:

示例 2: 设置圆圈中虚线的密度。

```html <!DOCTYPE html>
       CSS | stroke-dasharray property           .stroke1 {       stroke-dasharray: 10;

stroke: green;       stroke-width: 20;     }

.stroke2 {       stroke-dasharray: 20;

stroke: red;       stroke-width: 20;     }

.stroke3 {       stroke-dasharray: 40;

stroke: orange;       stroke-width: 20;     }
    GeeksforGeeks
       CSS | stroke-dasharray

```
输出:

示例 3: 设置破折号的图案。

```html <!DOCTYPE html>
       CSS | stroke-dasharray property           .stroke1 {       stroke-dasharray: 20;

stroke: green;       stroke-width: 20;     }

.stroke2 {       / pattern with even number       of values /       stroke-dasharray: 40 20;

stroke: red;           stroke-width: 20;     }

.stroke3 {       / pattern with odd number       of values /       stroke-dasharray: 80 40 20;

stroke: orange;       stroke-width: 20;     }
    GeeksforGeeks
       CSS | stroke-dasharray

```
输出:
无:用于指定不使用模式。这是默认值。