CSS border-right-width 属性-之路教程

语法

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

border-right 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        width: 50%;
        border-style: dotted;
        border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-right-width example</h2>
    <p>As you can see the width of the right border is set to thick.</p>
  </body>
</html>

具有所有值的 border-right 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {
        border-right-width: medium;
      }
      .b2 {
        border-right-width: thin;
      }
      .b3 {
        border-right-width: thick;
      }
      .b4 {
        border-right-width: 10px;
      }
      .b5 {
        border-right-width: initial;
      }
      .b6 {
        border-right-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-width  示例</h1>
    <main class="flex-center">
      <div class="b1">
        medium 中等厚度
      </div>
      <div class="b2">
        thin 薄厚度
      </div>
      <div class="b3">
        thick 厚
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px lenght
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

CSS border-right-width 属性值说明

值	说明
medium	定义中等右边框。它是此属性的默认值。
thin	定义右细边框。确切的宽度由用户代理决定。
thick	定义粗右边框。确切的宽度由用户代理决定。
length	定义右边框的厚度和长度。例如，10px、5em、8pt等。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS border-right-width 属性

border-right-width 属性用于定义元素右边框的宽度。
右边框宽度以及所有其他边框边也可以使用 border 或者 border-width 速记属性来定义。

要设置 border-right-width，我们应该首先定义 border-style 属性，因为在设置其宽度之前需要边框。

border-right-style 或者 border-style 可用于指定边框的样式。

该规范没有定义每个关键字的确切厚度。
但是，它们始终遵循以下顺序： thin ≤ medium ≤ thick

该规范没有定义不同宽度和样式的边框如何在角落中连接。

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

日期：2020-06-02 22:14:19 来源：oir作者：oir

←CSS border-right-style 属性

CSS border-right 属性→

语法

border-right 属性示例：

具有所有值的 border-right 属性示例：

CSS border-right-width 属性值说明

目录