CSS 基础学习-051 使用border-style属性设置不同样式的单独边框

由 hrs, 5 九月, 2021

如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;

  • 上边框是虚线
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

  • 上边框是虚线
  • 右和左边框是实线
  • 下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

  • 四条边均为虚线

 

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>单独的边框</title>
    <style>
      p{  
        text-align:center;
        width:300px;
      }   
      .one{
        border-style:dotted solid double dashed;
      }   
    
      .two{
        border-style:dotted solid double ;
      }   
      .three{
        border-style:dotted solid ;
      }   
      .four{
        border-style:dotted ;
      }   
    </style>
  </head>
  <body>
    <h1>单独的边框</h1>
    <p class="one">四种不同的边框样式</p>
    <p class="two">三种不同的边框样式</p>
    <p class="three">两种不同的边框样式</p>
    <p class="four">一种不同的边框样式</p>
  </body>
</html>

运行效果：

css-051.png

标签

评论