在html中我要打出一条虚线的方法有哪些？
这里写的对吗？具体方法有三个：(楼下的提供了另一个思路，把他的修正了一下)1.画虚线的图，然后插入网页中，缺点是这个虚线不能随意变动大小。因为拉伸图片会产生失真。2.<d...
这里写的对吗？
具体方法有三个：(楼下的提供了另一个思路，把他的修正了一下)
1. 画虚线的图，然后插入网页中，缺点是这个虚线不能随意变动大小。因为拉伸图片会产生失真。
2. <div style="width:200px;height:0px;border-top:1px black dashed;" />，缺点，不能改变方向
3. 用svg，可以随意改变大小，粗细，方向，例子如下：
<html>
<head>
</head>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.198bona.com#"
xmlns:svg="http://www.198bona.com"
xmlns="http://www.198bona.com"
version="1.1"
width="500"
height="500"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-552.36218)"
id="layer1">
<path
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" />
</g>
</body>
</html>
缺点，不能直接在IE里用，火狐、Chrome等都没问题。
想在IE里用，还得加入Raphaël—JavaScript Library，让IE能识别这个SVG图。 展开
具体方法有三个：(楼下的提供了另一个思路，把他的修正了一下)
1. 画虚线的图，然后插入网页中，缺点是这个虚线不能随意变动大小。因为拉伸图片会产生失真。
2. <div style="width:200px;height:0px;border-top:1px black dashed;" />，缺点，不能改变方向
3. 用svg，可以随意改变大小，粗细，方向，例子如下：
<html>
<head>
</head>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.198bona.com#"
xmlns:svg="http://www.198bona.com"
xmlns="http://www.198bona.com"
version="1.1"
width="500"
height="500"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-552.36218)"
id="layer1">
<path
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" />
</g>
</body>
</html>
缺点，不能直接在IE里用，火狐、Chrome等都没问题。
想在IE里用，还得加入Raphaël—JavaScript Library，让IE能识别这个SVG图。 展开
展开全部
除了这些方法外还可以用canvas画虚线。
直接用图片的时候可以考虑用背景图片，这样就可以使用背景的repeat方式无限延长。
无论是用border还是图片都可以使用css3的transform属性设置方向和其他变形。
使用svg或canvas都可以更灵活改变虚线的方向等显示方式。
如果要考虑兼容低版本IE浏览器，当然是用border属性或图片背景兼容性最好，其他方式都需要另外引用js才能兼容。
直接用图片的时候可以考虑用背景图片，这样就可以使用背景的repeat方式无限延长。
无论是用border还是图片都可以使用css3的transform属性设置方向和其他变形。
使用svg或canvas都可以更灵活改变虚线的方向等显示方式。
如果要考虑兼容低版本IE浏览器，当然是用border属性或图片背景兼容性最好，其他方式都需要另外引用js才能兼容。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1：可以用图片
2：可以用样式
3：可以用svg和canvas
2：可以用样式
3：可以用svg和canvas
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
