网页中用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

是实线

border线型主要有:

1、dotted【点状】

2、solid【实线】

3、double【双实线】

4、dashed【虚线】

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

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

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

1、打开html开发工具,新建一个html代码页面,然后创建一个<div>标签,并给这个标签添加文字和一个class为了dashed。创建<div>代码:<div class="dashed">dashed: 定义一个虚线边框</div>

2、设置虚线边框。创建<style>标签,然后在这个标签里设置dashed类的样式为虚线边框。css样式代码:<style type="text/css">.dashed{border-style:dashedborder-width:1px</style>

3、保存html代码,然后使用浏览器打开,即可看到浏览器页面上显示一个虚线边框。