CSS 基础学习-045 使用border-width 属性设置边框宽度

由 hrs, 29 八月, 2021

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin(薄的)、medium（中等的） 或 thick（厚的）

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-width 边框宽度</title>
  <style>
    p{  
      background-color:yellow;
      width:600px;
    }   
      .border1{
        border-style: solid ;
        border-width:6px;
      }   

      .border2{
        border-style: solid ;
        border-width:medium;
      }   
      .border3{
        border-style: dotted ;
        border-width:2px;
      }   
      .border4{
        border-style: dotted ;
        border-width:thick;
      }   

      .border5{
        border-style: double ;
        border-width:15px;
      }   
      .border6{
        border-style: double ;
        border-width:thick;
      }   
    </style>
  </head>
  <body>
    <h1>border-width 属性</h1>
    <P>此属性规定四条边框的宽度。</P>
    <p class="border1">一些文本</p>
    <p class="border2">一些文本</p>
    <p class="border3">一些文本</p>
    <p class="border4">一些文本</p>
    <p class="border5">一些文本</p>
    <p class="border6">一些文本</p>
    <p ><b>注释：</b>border-color属性单独使用时不起作用。请首先使用border-style>属性设置样式</p> 

  </body>
</html>

运行效果：

css-045.png

标签

评论