CSS border-right 属性-之路教程

←CSS border-right-width 属性

CSS border-spacing属性→

CSS border-right 属性

CSS border-right 属性设置元素右边框的宽度、线条样式和颜色。
它是用于指定以下属性值的速记属性：

border-right-width,
border-right-style,
border-right-color.

速记属性的这三个值可以按任意顺序指定，可以省略其中的一两个。

在未指定颜色的情况下，该值将从颜色属性中获取。

如果未定义颜色属性，则默认为黑色。

如果没有指定宽度，它将采用元素的中等大小。

Default Value	medium none 当前颜色
应用于	所有元素。它也适用于::first-letter。
继承	不可继承
可动画的	宽度和颜色可设置动画。
版本	CSS1
DOM 语法	object.style.borderRight="1px solid black";

CSS border-right 属性值说明

值	说明
border-right-width	设置元素的右边框宽度。默认值为“中”。必需值。
border-right-style	设置元素右边框的线条样式。默认值为“无”。必需值。
border-right-color	设置元素右边框的颜色。默认值是文本的当前颜色。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

语法

border-right: border-width border-style border-color | initial | inherit;

border-right 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-right: 5px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-right 示例</h2>
    <div> 把痛苦停在昨天 把微笑留给明天</div>
  </body>
</html>

border-right 属性可以应用于不同的元素，并且可以具有不同的样式值。

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-right: 7px solid #8ebf42;
      }
      p {
        border-right: 5px dotted #1c87c9;
      }
      div {
        border-right: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>带有纯绿色右边框的标题</h1>
    <p>带有蓝色虚线右边框的标题。</p>
    <div>带有粗双右边框的 div 元素。</div>
  </body>
</html>

我们还可以使用 <div> 元素创建一个框并为框设置背景颜色，然后添加一个右边框以获得一个漂亮的框。

使用 border-right 属性创建花式框的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        height: 80px;
        text-align: center;
        padding: 20px;
        background: #ccc;
        border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>这个框的右侧有一个实心边框。</div>
  </body>
</html>

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