html设定虚线边框的方式

用到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⑻" /> 
  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不一样标识设定边框虚线实际效果截图