首页 > 文章 > 前端

CSS设置实线虚线点线边框方法

时间：2025-12-27 20:03:52 456浏览收藏

大家好，我们又见面了啊~本文《CSS边框样式怎么设置实线虚线点线》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

border-style用于设置边框样式，可取solid（实线）、dashed（虚线）、dotted（点线）等值，需配合border-width和border-color使用，且仅当style非none时边框才显示。

CSS边框样式如何应用_border-style实线虚线或点线效果

在CSS中，border-style 属性用于设置元素边框的样式。你可以通过它来实现实线、虚线、点线等视觉效果。该属性可以分别应用于上、右、下、左四个边框，也可以统一设置。

常用 border-style 取值

以下是 border-style 支持的主要样式值：

solid：实线边框，最常用
dashed：虚线边框（短横线）
dotted：点线边框（由小圆点组成）
none：无边框（默认）
hidden：隐藏边框（与 none 类似，但在表格边框合并时有区别）
其他如 double、groove、ridge、inset、outset 等，用于特殊立体效果

基本语法与用法

你可以为四个边分别设置样式，也可以统一设置：

/* 四个边统一设置 */
div {
  border-style: solid;
}
<p>/<em> 分别设置四个边 </em>/
div {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: none;
}</p><p>/<em> 使用简写 border 属性（推荐） </em>/
div {
border: 2px solid #000;         /<em> 实线 </em>/
border: 1px dashed red;         /<em> 虚线 </em>/
border: 1px dotted blue;         /<em> 点线 </em>/
}</p>

实际应用示例

以下是一个包含多种边框样式的HTML元素示例：

<div class="box solid">实线边框</div>
<div class="box dashed">虚线边框</div>
<div class="box dotted">点线边框</div>
<p><style>
.box {
width: 200px;
height: 50px;
margin: 10px 0;
text-align: center;
line-height: 50px;
border-width: 2px;
}</p><p>.solid  { border-style: solid;   border-color: #000; }
.dashed { border-style: dashed;  border-color: #f00; }
.dotted { border-style: dotted;  border-color: #00f; }
</style></p>

基本上就这些。通过 border-style 配合 border-width 和 border-color，你可以灵活控制边框的外观。使用简写的 border 属性会更高效。注意：只有当 border-style 不是 none 时，边框才会显示。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS设置实线虚线点线边框方法》文章吧，也可关注golang学习网公众号了解相关技术文章。