<line-style> - CSS | MDN

语法

值

<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> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

示例

第一个示例演示了所有的 <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>

<div class="none">
  <p>none</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>
<div class="hidden">
  <p>hidden</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>
<div class="dotted">
  <p>dotted</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>
<div class="dashed">
  <p>dashed</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>
<div class="solid">
  <p>solid</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>
<div class="double">
  <p>double</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>
<div class="groove">
  <p>groove</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>
<div class="ridge">
  <p>ridge</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>
<div class="inset">
  <p>inset</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>
<div class="outset">
  <p>outset</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。对于每个段落，通过为 border-style 和 column-rule-style 属性指定不同的 <line-style> 值来覆盖 double 值。

div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}

css

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: black;
}
.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”效果，用户代理使用的颜色计算方式不同于任何其他颜色与线条的组合。

CSS

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

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-transform: uppercase;
  font-family: monospace;
}

css

div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}

JavaScript

JavaScript 动态创建 <div> 元素，每个元素都设置了不同的 border-color。

// prettier-ignore
const colors = [
  "#000000", "#000001", "#ffffff",
  "#ff00ff", "#ffff00", "#00ffff",
  "#cc33cc", "#cccc33", "#33cccc",
  "#ff0000", "#00ff00", "#0000ff",
  "#cc3333", "#33cc33", "#3333cc",
  "#993333", "#339933", "#333399",
];

for (const c of colors) {
  const div = document.createElement("div");
  div.style.borderColor = c;
  div.textContent = c;
  document.body.appendChild(div);
}

结果

请注意，接近黑色的 #000001 可能与实际的黑色不同，当使用较浅的颜色时，深色和浅色边缘之间的对比度更加明显。

规范

规范
CSS Backgrounds and Borders Module Level 3 # typedef-line-style

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页最后修改于 ⁨2025⁩年⁧8⁩月⁧9⁩日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题