当前位置：主页 > 查看内容

html设置虚线边框的方法

发布时间：2021-05-16 00:00| 有 位朋友查看

简介：用到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代码：

  1. <!DOCTYPE html> <html> 
  2. <head> <meta charset="utf-8" /> 
  3. <title>html边框虚线演示 www.pcss5.com</title> <style> 
  4. .bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ 
  5. </style> </head> 
  6. <body> <p class="bor">p盒子</p> 
  7. <span class="bor">span盒子</span> <ul class="bor"> 
  8. <li>ul li列表</li> <li>ul li列表</li> 
  9. </ul> <table class="bor"> 
  10. <tr> <td>表格</td> 
  11. <td>表格2</td> </tr> 
  12. <tr> <td>数据</td> 
  13. <td>数据2</td> </tr> 
  14. </table> </body> 
  15. </html> 

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

6、浏览器效果截图

html不同标签设置边框虚线效果截图


原文链接：https://m.jb51.net/web/162447.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：使用css美化html表单控件详细示例(表单美化) 下一篇：html设置字体颜色的方法和使用ps获取html准确字体颜色的方法

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐