border-bottom: 1px dotted #000;这是一种方法，还有一种方法就是使用背景例子如下：
showLine {
float:left;
height:10px;
width:100%;
border:0;
background:url(/images/xianpng) center bottom no-repeat;//此处为做好的点线图
}
方法一:作一个1X2的图。
半黑半白，再利用表格作成线。这种方法固然麻烦，但在任何浏览器中均可浏览，兼容性最好。
方法二:在CSS里面设定。
假如你用DreamWeaver话，只要在CSS面板里new一个style，选择“redefineHTMLTag”，再在下拉菜单里先“table”，在d出的面板里，category里选择border，在border里，将top,left,right,bottom都设成1px，颜色设成你想要的边框的颜色。然后在style下拉框里选择dashed。一切ok。只是所有的表格都会用虚线做边框了。留意，这个效果在浏览器里才能看见。
方法三:直接在html里设置(假如你只想让某一个表格边框是虚线的话)。
在表格的html里加上这个:
style="BORDER-LEFT:#0000001PXDASHED;BORDER-RIGHT:#0000001PXDASHED;BORDER-TOP:#0000001PXDASHED;BORDER-BOTTOM:#0000001PXDASHED"
颜色是十六位代码，你可以自己设。
可以用CSS样式和HTML标签元素实现，我们选择几个常用标签对齐设置边框虚线效果：
1、html常用标签：
p标签
span
ul li
table tr td
2、实例用到CSS属性单词：
border
width
height
3、实现虚线的CSS重点介绍：
border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线）：
border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。
4、实例描述：
我们对以上几个标签设置相同宽度、相同高度、边框效果。
5、完整HTML代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>html边框虚线演示</title>
<style> bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/css注释说明：让span形成块/
</style>
</head>
<body>
<p class="bor">p盒子</p>
<span class="bor">span盒子</span>
<ul class="bor">
<li>ul li列表</li>
<li>ul li列表</li>
</ul> <table class="bor">
<tr>
<td>表格</td>
<td>表格2</td>
</tr>
<tr>
<td>数据</td>
<td>数据2</td>
</tr>
</table>
</body>
</html>
效果图：
直接运用CSS中的文本修饰属性text-decoration是没有办法实现下划线为虚线的。不过可以考虑使用border属性来实现。示例代码如下：
border-bottom:1px dashed #000;这里的意思就是1px宽度的黑色虚线下边框。看起来就跟下划线一样的效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）