css怎么设置虚线分割线（div-css盒子怎么在里面添加虚线）

：暂无数据 2026-05-01 02:40:02 ：0

想高效掌握css怎么设置虚线分割线的核心吗？本文将为你聚焦div-css盒子怎么在里面添加虚线这一关键环节，帮你节省大量摸索时间。

本文目录

div-css盒子怎么在里面添加虚线
CSS如何定义一条水平虚线
div css 怎么在文本中加分割线
div+css行与行之间的虚线怎么做
如何用CSS定义虚线间隔
中间的虚线 css如何实现
网页中用CSS做虚线

div-css盒子怎么在里面添加虚线

已知的方式有2种（纯样式）：
1.用标签（div、span这些标签都可以）的边框线设置虚线来实现，比如在需要的位置插入div然后设置border-top(或者border-bottom):1px dashed #e5e5e5;(3个属性分别表示：1像素的边宽虚线颜色)；
2.用hr,不过因为实现方式和方式一一样，比如：《hr style="height:1px;border:none;border-top:1px dashed #e5e5e5;" /》，但是这个标签在H5种已经被淘汰了，完全可以靠第一种来实现。第二种就当做是知识扩展

CSS如何定义一条水平虚线

需要准备的材料分别有：电脑、浏览器、html器。

1、首先，打开html器，新建html文件，例如：*****。

2、在*****中的《style》标签中，输入css代码：div {height:60px;border-bottom:1px dashed}。

3、浏览器运行*****页面，此时通过css定义了一个水平的虚线。

div css 怎么在文本中加分割线

css中写border-bottom:1px dashed #ccc;

dashed 虚线

solid 实线

dotted 点

《style》
.c{float:left;width:200px;}
li{float:left;width:200px;height:30px;line-height:30px;border-bottom:1px dashed #ccc}
《/style》
《div class="c"》
《ul》
《li》11111111111111111111《/li》
《li》11111111111111111111《/li》
《li》11111111111111111111《/li》
《/ul》
《/div》

div+css行与行之间的虚线怎么做

用CSS边框样式
border-bottom:1px dashed #ddd;
以下是一些边框样式参考，希望对你有用
边框样式
语法：
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上*****+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上*****+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画**凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画**凹边
outset : 　根据border-color的值画**凸边
边框宽度
语法：
border-width : medium | thin | thick | length

参数：
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
边框颜色
语法：
border-color : color

参数：
color : 　指定颜色。请参阅颜色单位和附录：颜色表

说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。

如何用CSS定义虚线间隔

在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：
border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-imageborder-top-imageborder-top-right-image
border-left-imageborder-right-image
border-bottom-left-imageborder-bottom-imageborder-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。