<line-style>

<line-style> 枚举 值类型表示定义线条样式或无线条的关键字值。<line-style> 关键字值用于以下长格式和短格式 边框 和 列 属性

语法

css
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

值

<line-style> 枚举类型使用下面列出的值之一指定

none

不显示任何线条。即使指定了宽度值，线条的计算宽度也为 0。在表格单元格和边框折叠的情况下，none 值具有 *最低* 优先级。如果设置了任何其他冲突的边框，它将被显示。none 值类似于 hidden。

hidden

不显示任何线条。即使指定了宽度值，线条的计算宽度也为 0。在表格单元格和边框折叠的情况下，hidden 值具有 *最高* 优先级。如果设置了任何其他冲突的边框，它将不会被显示。hidden 值类似于 none，但 hidden 不是轮廓样式的有效值。

dotted

显示一系列圆点。圆点的半径是线条宽度的计算值的二分之一。圆点的间距没有在规范中定义，并且是实现相关的。

dashed

显示一系列短的方头虚线或线段。线段的确切大小和长度没有在规范中定义，并且是实现相关的。

solid

显示一条单一的直实线。

double

显示两条直线，两条直线之间有一些间距。两条线的长度加起来等于由线条宽度定义的像素大小。

groove

显示具有雕刻外观的边框。此值与 ridge 相反。

ridge

显示具有凸出外观的边框。此值与 groove 相反。

inset

显示使元素看起来嵌入的边框。此值与 outset 相反。当应用于表格单元格边框且 border-collapse 设置为 collapsed 时，此值的行为类似于 groove。

outset

显示使元素看起来浮雕的边框。此值与 inset 相反。当应用于 border-collapse 设置为 collapsed 的表格单元格时，此值的行为类似于 ridge。

注意：当 <outline-style> 用作 outline 和 outline-style 属性的值类型时，它类似于 <line-style>，但不支持 hidden 并且包含 auto 值。当设置 auto 时，将使用用户代理定义的 <line-style> 值。

示例

第一个示例演示了所有<line-style> 关键字值。第二个示例演示了某些线型颜色可能以意想不到的方式显示。

定义线型

此示例展示了所有<line-style> 值作为 CSS border-style 和 column-rule-style 属性的值。

HTML

此示例使用多个 <div> 元素，每个元素都有一个类代表正在演示的<line-style> 值。

html
<div class="<line-style>">
  <p><line-style></p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

在此示例的 CSS 中，所有<p> 元素的边框和列规则定义为宽度为7px，样式值为double。对于每个段落，double 值随后通过为border-style 和column-rule-style 属性指定不同的<line-style> 值来覆盖。

css
p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: #000000;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

结果

注意，黑色边框并不总是黑色。

定义线型和颜色

此示例演示了线型和颜色的选择。对于某些<line-style> 关键字值，线的颜色可能不是您期望的。为了在黑色或白色显示这些值时创建所需的groove、ridge、inset 和outset 样式的“3D”效果，用户代理使用与任何其他颜色线组合不同的颜色计算。

HTML

此示例使用多个 <div> 元素，每个元素都有一个不同的border-color 作为内联 style 设置。

html
<div style="border-color: #000000"></div>

CSS

每个<div> 的四边都有不同的<line-style> 值，并且每个列表项都有不同的 <color> 值。我们使用 生成内容 来显示内联声明的 CSS。

css
div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}
div::before {
  content: attr(style);
}

结果

注意，几乎黑色的#000001 颜色可能与实际黑色不同，并且当使用浅色时，深色和浅色边缘之间的对比度会更加明显。

规范

规范
CSS 背景和边框模块 Level 3
# typedef-line-style

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅