当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

CSS border-right-style用法及代码示例


CSS 中的 border-right-style 属性用于改变元素边框右线段的外观。

默认值

  • none

用法: 

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

属性值：

none:它是默认值，它使右边框的宽度为零。因此，它是不可见的。

  • 用法： 
border-right-style:none;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:none;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:none; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-none

hidden:它用于使右边框不可见，就像没有一样，除非在表格元素的边框冲突解决的情况下。

  • 用法： 
border-right-style:hidden;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:hidden;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:hidden; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-hidden

dotted:它用于用一系列点制作右边框。

  • 用法： 
border-right-style:dotted;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:dotted;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:dotted; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-dotted

dashed:它用一系列短线段制作右边框。

  • 用法： 
border-right-style:dashed;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:dashed;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:dashed; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-dashed

solid:它用于用单个实线段制作右边框。

  • 用法： 
border-right-style:solid;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:solid;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:solid; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-solid

double:此属性使右边框带有双实线。在这种情况下，边框宽度等于 two-line 段的宽度和它们之间的空间的总和。

  • 用法： 
border-right-style:double;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property for border-right-style */
                border-right-style:double;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:double; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-double

groove:它使右侧边框带有凹槽线段，这让我们感觉它正在进入内部。

  • 用法： 
border-right-style:groove;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                border:10px;
                border-style:solid;
                 
                /* CSS Property for border-right-style */
                border-right-style:groove;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:groove; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                               
  • Output:

CSS | Property | border-right-style-groove

inset:它使右边框嵌入了一条线段，这让我们感觉它深深地固定在屏幕上。

  • 用法： 
border-right-style:inset;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                border:10px;
                border-style:solid;
                 
                /* CSS Property for border-right-style */
                border-right-style:inset;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:inset; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-inset

outset:它与插图相反。它使右边界带有一条线段，似乎要出来了。

  • 用法： 
border-right-style:outset;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                border:10px;
                border-style:solid;
                 
                /* CSS Property for border-right-style */
                border-right-style:outset;
            }
        </style>
     
    </head>
     
    <body>
        <!-- border-right-style:outset; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-outset

inherit:它使 right-border-style 属性从其父元素继承。

  • 用法： 
border-right-style:inherit;
  • Example:

html


<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS border-right-style Property
        </title>
     
        <!-- Internal CSS Style Sheet -->
        <style>
            body {
                border-right-style:dashed;
            }
            h1 {
                color:green;
                text-align:center;
                border:5px solid black;
         
                /* CSS Property | border-right-style */
                border-right-style:inherit;
            }
        </style>
    </head>
     
    <body>
        <!-- border-right-style:inherit; -->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                   
  • Output:

CSS | Property | border-right-style-inherit

支持的浏览器： border-right-style 属性支持的浏览器如下：

  • 谷歌浏览器1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

相关用法


注：本文由纯净天空筛选整理自Husban大神的英文原创作品 CSS | border-right-style Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。