當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。