网页中用CSS做虚线

html-css09

网页中用CSS做虚线,第1张

<td

style="border-bottom:1px

dotted

#ccc">文字内容</td>

<td

style="border（边框）-bottom（底部）:1px（1像素）

dotted

（虚线）#ccc（颜色）">文字内容</td>

上面这句话的意思是：在这个td里面的样式为

底部边框为1像素颜色为#ccc的虚线

dotted

是虚线

solid

是实线

直接运用CSS中的文本修饰属性text-decoration是没有办法实现下划线为虚线的。不过可以考虑使用border属性来实现。示例代码如下：

border-bottom:1px dashed #000

这里的意思就是1px宽度的黑色虚线下边框。看起来就跟下划线一样的效果。

border线型主要有：

1、dotted【点状】

2、solid【实线】

3、double【双实线】

4、dashed【虚线】

实例一：如果一个CSS这样写：border-style:dotted solid double dashed出来的框就是：上边框是点状，右边框是实线，下边框是双线，左边框是虚线

实例二：如果一个CSS这样写：border-bottom:1px dashed #000000出来的框就是：一条宽度为1像素的黑色下划虚线。

以此类推。多试试就知道什么效果了哦。