<line-style> 数据类型表示指定线条样式或缺少线条的关键字值。
<line-style> 关键字用于以下列出的边框和列属性:
可能的值
其中之一以下值用于指定 <line-style> 枚举类型:
none - 不显示任何行。
hidden - 与无值类似，不显示任何行。具有隐藏显示选项的元素不会显示任何线条（即使指定了宽度值）。当隐藏优先时，冲突的边框会被隐藏，例如表格单元格或边框折叠的情况。
dotted - 显示一系列圆点。
dashed - 它显示一系列短的方端虚线或线段。
solid - 此设计显示单、不间断、永不断裂的实线。
double - 显示两条直线、平行线，它们间隔预定的距离，并且两条线的总长度相等线的宽度（以像素为单位）。
groove - 显示具有雕刻外观的边框。
ridge - 显示具有拉伸外观的边框。
inset - 显示使元素看起来像是嵌入的边框。当应用于具有折叠边框折叠设置的表格单元格边框时，它充当凹槽样式。
outset - 它显示提升或提升元素外观的边框样式。当在 border-collapse 设置为折叠的表格单元格中使用时，其功能类似于山脊样式。
语法
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset CSS <line-style>: 定义线条样式。
以下示例中的 <line-style> 值与 border-style 等 CSS 属性完全对应，这些属性定义不同的边框外观，如none, hidden, dotted, dashed, solid, double, groove, ridge, inset, 和 outset。
这些 <line-style> 描述为 HTML 组件提供了广泛的样式选择，并且它们严格控制边框的视觉显示方式。
<html>
<head>
<style>
div {
display: inline-block;
margin: 5px;
padding: 5px;
}
p {
margin: 5px;
font-weight: bold;
padding: 5px;
border: double 7px #44ebb3;
}
p + p {
columns: 2;
column-gap: 10px;
column-rule: double 7px;
border-color: #727876;
}
.no-border p {
border-style: none;
}
.hidden-border p {
border-style: hidden;
}
.dotted-border p {
border-style: dotted;
}
.dashed-border p {
border-style: dashed;
}
.solid-border p {
border-style: solid;
}
.double-border p {
border-style: double;
}
.groove-border p {
border-style: groove;
}
.ridge-border p {
border-style: ridge;
}
.inset-border p {
border-style: inset;
}
.outset-border p {
border-style: outset;
}
</style>
</head>
<body>
<div class="no-border">
<p>no-border</p>
<p>This is an example of no border</p>
</div>
<div class="hidden-border">
<p>hidden-border</p>
<p>This is an example of hidden border</p>
</div>
<div class="dotted-border">
<p>dotted-border</p>
<p>This is an example of dotted border</p>
</div>
<div class="dashed-border">
<p>dashed-border</p>
<p>This is an example of dashed border</p>
</div>
<div class="solid-border">
<p>solid-border</p>
<p>This is an example of solid border</p>
</div>
<div class="double-border">
<p>double-border</p>
<p>This is an example of double border</p>
</div>
<div class="groove-border">
<p>groove-border</p>
<p>This is an example of groove border</p>
</div>
<div class="ridge-border">
<p>ridge-border</p>
<p>This is an example of ridge border</p>
</div>
<div class="inset-border">
<p>inset-border</p>
<p>This is an example of inset border</p>
</div>
<div class="outset-border">
<p>outset-border</p>
<p>This is an example of outset border</p>
</div>
</body>
</html> CSS <line-style>: 定义线条样式和颜色
<line-style> 指示以下示例中使用的各种边框样式。
每种线条样式都有相应的边框颜色功能，可显示一系列颜色。
这说明了可能会出现的各种边框外观。通过组合不同的风格和颜色组合来实现。
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}
.box {
width: 200px;
padding: 20px;
margin: 10px;
}
p {
margin: 5px;
font-weight: bold;
padding: 5px;
border: double 7px #44ebb3;
}
.line-example {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
}
.line-example .box {
flex: 1;
margin: 10px;
}
.line-example p {
font-weight: normal;
padding: 10px;
margin: 0;
}
.dotted-border p {
border-style: dotted;
border-color: #FF5733; /* Orange */
}
.dashed-border p {
border-style: dashed;
border-color: #2E86C1; /* Blue */
}
.solid-border p {
border-style: solid;
border-color: #58D68D; /* Green */
}
.double-border p {
border-style: double;
border-color: #D4AC0D; /* Yellow */
}
.groove-border p {
border-style: groove;
border-color: #9B59B6; /* Purple */
}
.ridge-border p {
border-style: ridge;
border-color: #E74C3C; /* Red */
}
.inset-border p {
border-style: inset;
border-color: #3498DB; /* Light Blue */
}
.outset-border p {
border-style: outset;
border-color: #27AE60; /* Dark Green */
}
</style>
</head>
<body>
<div class="container">
<div class="box dotted-border">
<p>Dotted</p>
<p>This is an example of dotted line</p>
</div>
<div class="box dashed-border">
<p>Dashed</p>
<p>This is an example of dashed line</p>
</div>
<div class="box solid-border">
<p>Solid</p>
<p>This is an example of solid line</p>
</div>
<div class="box double-border">
<p>Double</p>
<p>This is an example of double line</p>
</div>
<div class="box groove-border">
<p>Groove</p>
<p>This is an example of groove line</p>
</div>
<div class="box ridge-border">
<p>Ridge</p>
<p>This is an example of ridge line</p>
</div>
<div class="box inset-border">
<p>Inset</p>
<p>This is an example of inset line</p>
</div>
<div class="box outset-border">
<p>Outset</p>
<p>This is an example of outset line</p>
</div>
</div>
</body>
</html>