语法

border-bottom-width: medium | thin | thick | length | initial | inherit;

边框底部宽度属性的示例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: dotted;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>
       使用 border-bottom-width 属性来设置该元素的下边框宽度。
    </p>
  </body>
</html>

具有“medium”值的 border-bottom-width 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      h2 {
        border-bottom-style: groove;
        border-bottom-width: medium;
      }
      div {
        border-style: groove;
        border-bottom-width: medium;
      }
    </style>
  </head>
  <body>
    <h2>具有中等底部边框的标题。</h2>
     <div>具有中等底部边框的 div 元素。</div>
  </body>
</html>

显示 "thin" 和 "thick" 值之间差异的 border-bottom-width 属性示例:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      h2 {
        padding: 5px;
        border-bottom-style: ridge;
        border-bottom-width: thin;
        border-color: #cccccc;
      }
      div {
        padding: 5px;
        border-style: ridge;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>带有细底边框的标题</h2>
     <div>带有粗底边框的 div 元素。</div>
  </body>
</html>
CSS border-bottom-width 属性

border-bottom-width 属性设置底部边框的宽度。

我们需要在 border-bottom-width 属性之前设置 border-style 或者 border-bottom-style 属性。

首先,我们需要有边框,然后才能更改宽度。

规范没有设置每个关键字设置的确切厚度,使用其中之一时的精确结果是特定于实现的。
但它们总是遵循薄 ≤ 中 ≤ 厚的模式,并且值在单个文档中是恒定的。

初始值medium
应用于所有元素。它也适用于::first-letter。
继承无效
可动画的宽度可以设置动画。
版本CSS1
DOM 语法object.style.borderBottomWidth=“5px”;

CSS border-bottom-width 属性值说明

说明
medium设置中底边框。它是默认值。
thin设置细底边框。
thick设置厚底边框。
length借助于此,我们可以设置底部边框的厚度。
initial将属性设置为其默认值。
inherit从父元素继承属性。
日期:2020-06-02 22:14:17 来源:oir作者:oir