HTML如何打虚线_HTML虚线（border-style:dashed）绘制方法

新闻中心 NEWS CENTER

2025-11-04

浏览次数：次

使用CSS的border-style: dashed属性可实现虚线效果，通过div或hr标签结合样式设置，能创建不同方向和样式的虚线，如横虚线、竖虚线，常用border-top或border-left等控制方向，配合width和height调整尺寸。

html如何打虚线_html虚线（border-style:dashed）绘制方法

在HTML和CSS中，想要绘制虚线效果，主要通过CSS的 border-style: dashed 属性来实现。HTML本身不直接支持绘制线条样式，但结合CSS可以轻松创建各种虚线边框。

最常见的方法是给元素设置边框，并将边框样式设为 dashed（虚线）：

<div class="dashed-line"></div>

<style>
.dashed-line {
    border-top: 2px dashed #000;
    width: 100%;
    height: 0;
}
</style>

说明：创建一个没有高度的 div，只显示顶部虚线边框，视觉上就是一条横虚线。

你可以控制任意一边的边框为虚线：

例如画一条垂直虚线：

<div class="vertical-dashed"></div>

<style>
.vertical-dashed {
    border-left: 2px dashed #000;
    height: 100px;
    width: 0;
}
</style>

dashed 只是其中一种边框样式，你还可以尝试：

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

虚线的长度和间距由浏览器默认控制，无法直接自定义单个“划”的长度，但可通过 border-width 调整粗细影响视觉效果。

语义化地表示水平分隔线时，可使用 hr 标签并自定义样式：

<hr class="dashed-hr">

<style>
.dashed-hr {
    border: none;
    border-top: 2px dashed #ccc;
    margin: 20px 0;
}
</style>

注意：先用 border: none 去掉默认样式，再重新定义 border-top。

基本上就这些。使用 border-style: dashed 是HTML中实现虚线最简单有效的方式，灵活结合 div、hr 等标签即可满足大多数场景需求。

以上就是HTML如何打虚线_HTML虚线（border-style:dashed）绘制方法的详细内容，更多请关注其它相关文章！