CSS 数据类型 - <line-style>

<line-style> 数据类型表示指定线型或无线的关键字值。

<line-style> 关键字用于以下列出的边框和列属性

可能的值

以下值之一用于指定<line-style> 枚举类型

none - 不显示任何线条。
hidden - 与none值类似，不显示任何线条。具有hidden显示选项的元素不会显示任何线条（即使指定了宽度值）。当hidden优先时，冲突的边框会被隐藏，例如表格单元格或边框折叠。
dotted - 显示一系列圆点。
dashed - 它显示一系列短的方形虚线或线段。
solid - 此设计显示一条单一、不间断的实线，永不中断。
double - 显示两条直的平行线，这两条线之间由预定的距离隔开，两条线的总长度等于线条的宽度（以像素为单位）。
groove - 显示带有雕刻外观的边框。
ridge - 显示带有挤出外观的边框。
inset - 显示使元素看起来嵌入的边框。当应用于具有collapsed border-collapse 设置的表格单元格边框时，它充当groove样式。
outset - 它显示一种抬高或提升元素外观的边框样式。当在边框折叠设置为折叠的表格单元格中使用时，其功能类似于ridge样式。

语法

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

CSS <line-style> - 定义线型。

以下示例中的<line-style>值与 CSS 属性（如border-style）完全对应，这些属性定义了不同的边框外观，如 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> 指示以下示例中使用的各种边框样式。
每种线型都有一个对应的 border-color 特性，它显示一系列颜色。
这说明了通过组合不同的样式和颜色组合可以实现的各种边框外观。

 
<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>

打印页面