在html中我要打出一条虚线怎么写

2024-12-25 17:57:37

推荐回答（5个）

回答1：

具体有两种方法：

1、画虚线的图，然后插入网页中。缺点是这个虚线不能随意变动大小，因为拉伸图片会产生失真。

2、编程

。缺点，不能改变方向。

还可以用svg，可以随意改变大小，粗细，方向，例子如下：

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.1"

width="500"

height="500"

id="svg2">

id="defs4" />

id="metadata7">

rdf:about="">

image/svg+xml

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

transform="translate(0,-552.36218)"

id="layer1">

d="m 68.571428,651.6479 239.999992,0"

id="path2985"

style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 3;stroke-dashoffset:0" />

缺点是不能直接在IE里用，火狐、Chrome等都没问题。

回答2：

具体方法有三个：(楼下的提供了另一个思路，把他的修正了一下)
1. 画虚线的图，然后插入网页中，缺点是这个虚线不能随意变动大小。因为拉伸图片会产生失真。
2.

，缺点，不能改变方向

3. 用svg，可以随意改变大小，粗细，方向，例子如下：

xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="500"
height="500"
id="svg2">
id="defs4" />
id="metadata7">

rdf:about="">
image/svg+xml
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

transform="translate(0,-552.36218)"
id="layer1">
d="m 68.571428,651.6479 239.999992,0"
id="path2985"
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 3;stroke-dashoffset:0" />

缺点，不能直接在IE里用，火狐、Chrome等都没问题。
想在IE里用，还得加入Raphaël—JavaScript Library，让IE能识别这个SVG图。

回答3：

你可以

这里要先把水平线本来颜色改为白色。在设计水平线的边框样式为虚线样式就可以了

回答4：

style="border-top:1px silver dashed;"

回答5：

画一张虚线的图，然后用标签添加
- -要不然就是

实线