html中文本下面怎么有虚线

324 阅读 0 评论 214 点赞

我是靠谱客的博主想人陪小甜瓜，最近开发中收集的这篇文章主要介绍html中文本下面怎么有虚线，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

border-bottom 简写属性把下边框的所有属性设置到一个声明中。

可以按顺序设置如下属性：

border-bottom-width
border-bottom-style
border-bottom-color

语法：

 border-bottom:width style color;
登录后复制

如果不设置其中的某个值，也不会出问题，比如 border-bottom:solid #ff0000; 也是允许的

设置元素下边框的样式时，只有当这个值不是 none 时边框才可能出现。

9S2}HL2[NB@Y_C0]NUCG3O8.png

例子：

<html>
  <head>
    <style type="text/css">
      p {
        border-style: solid;
      }
      p.none {
        border-bottom-style: none;
      }
      p.dotted {
        border-bottom-style: dotted;
      }
      p.dashed {
        border-bottom-style: dashed;
      }
      p.solid {
        border-bottom-style: solid;
      }
      p.double {
        border-bottom-style: double;
      }
      p.groove {
        border-bottom-style: groove;
      }
      p.ridge {
        border-bottom-style: ridge;
      }
      p.inset {
        border-bottom-style: inset;
      }
      p.outset {
        border-bottom-style: outset;
      }
    </style>
  </head>

  <body>
    <p class="none">No bottom border.</p>
    <p class="dotted">A dotted bottom border.</p>
    <p class="dashed">A dashed bottom border.</p>
    <p class="solid">A solid bottom border.</p>
    <p class="double">A double bottom border.</p>
    <p class="groove">A groove bottom border.</p>
    <p class="ridge">A ridge bottom border.</p>
    <p class="inset">An inset bottom border.</p>
    <p class="outset">An outset bottom border.</p>
  </body>
</html>
登录后复制

效果：

G@@86@_8N11UJ2L~3607H)O.png