css CSS |笔画宽度属性

CSS |笔画宽度属性

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

描边宽度属性用于设置 SVG 形状中边框的宽度。此属性只能应用于具有形状或为文本内容元素的元素。

语法:

stroke-width: <length> | <percentage>

属性值:

length: It is used to set the stroke width in measurement units. It can take values in whole numbers or percentages decimals. A value is not required to have a unit identifier like ‘px’ or ’em’. The value without units will be based on the coordinate system of the SVG view box.

示例 1: 本示例设置不带单位的笔画宽度。

```html <!DOCTYPE html>

    CSS | stroke-width
        .stroke1 {             stroke-width: 10;             stroke: green;         }         .stroke2 {             stroke-width: 30;             stroke: red;         }         .stroke3 {             stroke-width: 50;             stroke: orange;         }


        GeeksforGeeks

CSS | stroke-width



```

输出:

示例 2: 本示例以像素为单位设置笔画宽度。

```html <!DOCTYPE html>

    CSS | stroke-width
        .stroke1 {             stroke-width: 5px;             stroke: green;         }         .stroke2 {             stroke-width: 10px;             stroke: red;         }         .stroke3 {             stroke-width: 20px;             stroke: orange;         }


        GeeksforGeeks

CSS | stroke-width



```

输出:
percentage: It is used to set the stroke width in percentage.

示例:

```html <!DOCTYPE html>

    CSS | stroke-width
        .stroke1 {             stroke-width: 1%;             stroke: green;         }         .stroke2 {             stroke-width: 2%;             stroke: red;         }         .stroke3 {             stroke-width: 3%;             stroke: orange;         }


        GeeksforGeeks

CSS | stroke-width



```

输出: