CSS 基础学习-044 使用border-style 属性设置边框样式类型

hrs 提交于 2021/08/28 - 23:22 , 周六

border-style 属性指定要显示的边框类型。

实例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-style 边框类型</title>
    <style>
    div{
      float:left;
      margin:10px;
    }   
  p{
      background-color:#fff000;
      width:300px;
      padding:8px;
          
    }   
    p.dotted{border-style:dotted;}
    p.dashed{border-style:dashed;}
    p.solid{border-style:solid;}
    p.double{border-style:double;}
    p.groove{border-style:groove;}
    p.ridge{border-style:ridge;}
    p.inset{border-style:inset;}
    p.outset{border-style:outset;}
    p.none{border-style:none;}
    p.hidden{border-style:hidden;}
    p.mix{border-style:dotted dashed solid double;}
    </style>
  </head>
  <body>
  <h1>border-style 边框类型</h1>
  <div>
  <p>此属性规定要显示的边框类型:</p>
  <p class="dotted">点状边框</p>
  <p class="dashed">虚线边框</p>
  <p class="solid">实线边框</p>
  <p class="double">双线边框</p>
  <p class="groove">凹槽边框</p>
  </div>
  <div>

  <p class="ridge">垄状边框</p>
  <p class="inset">3D inset 边框</p>
  <p class="outset">3D outset 边框</p>
  <p class="none">无边框</p>
  <p class="hidden">隐藏边框</p>
  <p class="mix">混合边框</p>
  </div>
  </body>

</html>

运行效果:

css-044.png

标签