网页中用CSS做虚线

html-css015

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

<td

style="border-bottom:1px

dotted

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

<td

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

dotted

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

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

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

dotted

是虚线

solid

是实线

border线型主要有:

1、dotted【点状】

2、solid【实线】

3、double【双实线】

4、dashed【虚线】

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

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

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

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

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

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

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