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

语法

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

border-right-style 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-right-style: solid;
      }
      p {
        border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>实线右边框标题</h2>
    <p>点状右边框段落</p>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        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;
        background-color: #1c87c9;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-style example classes */
      .b1 {
        border-right-style: hidden;
      }
      .b2 {
        border-right-style: dotted;
      }
      .b3 {
        border-right-style: dashed;
      }
      .b4 {
        border-right-style: solid;
      }
      .b5 {
        border-right-style: double;
      }
      .b6 {
        border-right-style: groove;
      }
      .b7 {
        border-right-style: ridge;
      }
      .b8 {
        border-right-style: inset;
      }
      .b9 {
        border-right-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

CSS border-right-style 属性值说明

值	说明
none	定义没有任何边框。默认值。
hidden	与“无”相同，只是在表元素的边界冲突解决中。
dotted	定义虚线边框。
dashed	定义虚线边框。
double	定义双边框。
solid	定义实体边框。
groove	定义三维凹槽边框。它的效果可以随边框颜色的值而改变。
ridge	定义三维脊状边界。它的效果可以随边框颜色的值而改变。
inset	定义三维插入边框。它的效果可以随边框颜色的值而改变。
outset	定义三维边界。它的效果可以随边框颜色的值而改变。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS border-right-style 属性

CSS border-right-style 属性用于设置元素右边框的样式。
它被定义为从可用于边框样式属性的关键字中选择的单个关键字。
border-style 属性用于为元素的所有四个边设置样式，但 border-right-style 只为右边框设置样式。

右边框的默认宽度为中等。
可以通过使用 border-right-width 或者 border-width 属性来更改它。

并非所有浏览器都以相同的方式呈现样式。
Chrome 当前将点呈现为矩形点，而不是圆形点。

该规范没有指定点和破折号之间的间距量。

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

初始值	none
应用于	所有元素。它也适用于::first-letter。
继承	不可继承
可动画的	不可动画
版本	CSS1
DOM 语法	object.style.borderRightStyle=“dashed”；

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

←CSS border-right-color 属性

CSS border-right-width 属性→

语法

border-right-style 属性示例：

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

CSS border-right-style 属性值说明

目录