1. 首页
  2. CSS 菜鸟教程
  3. CSS 数据类型 - line-style

CSS 数据类型 - line-style

<line-style>数据类型表示指定线条样式或缺少线条的关键字值。

<line-style> 关键字用于以下列出的 border 和 column 属性：

可能的值

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

  • none - 不显示任何行。
  • hidden - 它类似于 none 值，不显示任何线条。具有隐藏显示选项的元素不会显示任何线条（即使指定了 width 值）。当 hidden 优先时，冲突的边框将被隐藏，例如表格单元格或边框折叠的情况。
  • dotted - 显示一系列圆点。
  • dashed - 它显示一系列短的方端虚线或线段。
  • solid - 此设计显示一条永不中断的单条不间断的实线。
  • double - 显示两条平行的直线，这些直线的间距为预先确定的量，并且两行的总长度等于线条的宽度（以像素为单位）。
  • groove - 显示具有雕刻外观的边框..
  • ridge - 显示具有拉伸外观的边界。
  • inset - 显示使元素显示为嵌入的边框。当应用于具有折叠边框-折叠设置的表格单元格边框时，它充当凹槽样式。
  • outset - 它显示一种边框样式，可提升或提升元素的外观。当在 border-collapse 设置为 collapsed 的表格单元格中使用时，它的功能类似于 ridge 样式。

语法


<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> 表示以下示例中使用的各种边框样式。
  • 每个线条样式都有相应的 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>
<< CSS 数据类型 - color-interpolation-method CSS - 伪元素 - ::before >>