网页中用CSS做虚线

html-css08

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

<td

style="border-bottom:1px

dotted

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

<td

style="border(边框)-bottom(底部):1px(1像素)

dotted

(虚线)#ccc(颜色)">文字内容</td>

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

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

dotted

是虚线

solid

是实线

none:不管边线宽度是多少,都不显示边线

dotted:点缀,由点组成的直线

dashed:由破折号组成的直线

solid:实线

double:在宽度许可的条件下,将看到两条平行线

groove:如果线条有颜色,将显示一条立体沟槽线

ridge:如果线条有颜色,将显示一条隆起立体线

inset:如果线条有颜色,将显示一条嵌入线

outset:如果线条有颜色,将显示一条立体端线

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:div {height:60pxborder-bottom:1px dashed}。

3、浏览器运行index.html页面,此时通过css定义了一个水平的虚线。