html虚线边框设置方法详解_html

当前位置：首页 > 网页教程 > html > 正文

html虚线边框设置方法详解: 发布时间：2019-10-03编辑：脚本学堂

本文介绍了html中虚线边框的设置方法，使用css样式和html标签元素，对html不同标签加边框虚线，感兴趣的朋友可以参考下。

使用css样式和html标签元素，对html不同标签加边框虚线，选择几个常用标签对齐设置边框虚线效果。
1、html常用标签 p标签 span ul li table tr td
2、实例用到css属性单词 border width height
3、实现虚线的css重点介绍 border为边框属性，如果要实

用到css样式和html标签元素

为了对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边框虚线演示 www.jb200.com</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>

以上实例对html中不同标签设置相同的样式，包括相同边框虚线。

6、浏览器效果截图
html不同标签设置边框虚线

上一篇：html插入图片 html添加图片
下一篇：meta标签详解 meta标签用法

与 html虚线边框设置方法详解有关的文章

本文标题：html虚线边框设置方法详解
本页链接：http://www.jb200.com/article/html/20494.html

浏览排行

栏目分类

热点文章

html虚线边框设置方法详解