linecap方法html,CSS stroke-linecap用法及代码示例

butt:它用于指示笔划不会超出笔划的端点。它使笔划看起来以锐利的直角结束。

例：

CSS | stroke-linecap

/* Assume the round

value for

demonstration */

.stroke-round {

stroke-linecap:round;

stroke-width:20px;

stroke:green;

}

.stroke-butt {

stroke-linecap:butt;

stroke-width:20px;

stroke:red;

}

GeeksforGeeks

CSS | stroke-linecap

xmlns="http://www.w3.org/2000/svg"

version="1.1">

x2="350" y1="30" y2="30" />

x2="350" y1="60" y2="60" />

输出：将舍入值与对接值进行比较

round:它用于指示笔划的末端以直径等于笔划宽度的半圆延伸。长度为零的子路径将具有一个以子路径的点为中心的完整圆。

例：

CSS | stroke-linecap

/* This is the

default value */

.stroke-butt {

stroke-linecap:butt;

stroke-width:20px;

stroke:green;

}

.stroke-round {

stroke-linecap:round;

stroke-width:20px;

stroke:red;

}

GeeksforGeeks

CSS | stroke-linecap

xmlns="http://www.w3.org/2000/svg"

version="1.1">

x2="350" y1="30" y2="30" />

x2="350" y1="60" y2="60" />

输出：将对接值与舍入值进行比较

square:它用于指示笔划的末端延伸有一个矩形，该矩形的高度等于笔划的宽度，而宽度等于笔划的宽度的一半。长度为零的子路径将具有一个以子路径的点为中心的正方形。

例：

CSS | stroke-linecap

/* This is the default

value */

.stroke-butt {

stroke-linecap:butt;

stroke-width:20px;

stroke:green;

}

.stroke-square {

stroke-linecap:square;

stroke-width:20px;

stroke:red;

}

GeeksforGeeks

CSS | stroke-linecap

xmlns="http://www.w3.org/2000/svg"

version="1.1">

x2="350" y1="30" y2="30" />

x2="350" y1="60" y2="60" />

输出：比较对接值和平方值

initial:用于将属性设置为其默认值。

例：

CSS | stroke-linecap

/* Assume the round

value for

demonstration */

.stroke-round {

stroke-linecap:round;

stroke-width:20px;

stroke:green;

}

.stroke-butt {

stroke-linecap:butt;

stroke-width:20px;

stroke:red;

}

GeeksforGeeks

CSS | stroke-linecap

xmlns="http://www.w3.org/2000/svg"

version="1.1">

x2="350" y1="30" y2="30" />

x2="350" y1="60" y2="60" />

输出：将舍入值与初始值进行比较

inherit:它用于将属性设置为从其父项继承。