直接用图片的时候可以考虑用背景图片，这样就可以使用背景的repeat方式无限延长。
无论是用border还是图片都可以使用css3的transform属性设置方向和其他变形。
使用svg或canvas都可以更灵活改变虚线的方向等显示方式。
如果要考虑兼容低版本IE浏览器，当然是用border属性或图片背景兼容性最好，其他方式都需要另外引用js才能兼容。
具体有两种方法：
1、画虚线的图，然后插入网页中。缺点是这个虚线不能随意变动大小，因为拉伸图片会产生失真。
2、编程<div style="width:200pxheight:0pxborder-top:1px black dashed" />。缺点，不能改变方向。
还可以用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.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">
<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:nonestroke:#000000stroke-width:1stroke-linecap:buttstroke-linejoin:miterstroke-miterlimit:4stroke-opacity:1stroke-dasharray:1, 3stroke-dashoffset:0" />
</g>
</body>
</html>
缺点是不能直接在IE里用，火狐、Chrome等都没问题。
<head><style>
.red-underspanne{
border-bottom:dashed 1px red
display:block
}
</style>
</head>
<h2 class='red-underspanne'>有虚线吧？在要加下划线的标签中加入class="red-underspanne"即可。</h2>
补充：不是和你说了“在要加下划线的标签中加入class="red-underspanne"”吗??????
看来你是基本的HTML知识都没有，HTML标签你知道是神马吗？？？
<h2></h2>就是标签，是会加粗的，这只是给你句个例子，就不会依葫芦画瓢，用在其它标签上吗？？？
你问过一个同样的问题了，有位朋友给了你正确的答案，还在问，真为他感到冤。。。
你的那是一个列表，在它的span标签里加入class="red-underspanne"
懂了吗？？？
<p>
<div><span class="red-underspanne">还是加粗的吗？？？</span><span class="red-underspanne">还是加粗的吗？？？</span><span
class="red-underspanne">还是加粗的吗？？？</span><span class="red-underspanne">还是加粗的吗？？？</span></div>
再补：
我后面给你的就不是粗的啊，我的疑问号也是反问。你是要求文字不加粗噻？
还有你的图片里那条黑色的粗线和红框框是怎么回事？自己Ps加上的吗？
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）