CSS border-left-style用法及代碼示例

CSS border-left-style屬性用於設置元素左邊框的樣式。

用法:

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

屬性值：

值	描述
none	它沒有設置左邊框。
hidden	它沒有設置邊框，除了表元素的邊框衝突解決方案。
dotted	它設置了一個虛線的左邊框。
dashed	它設置了一個虛線的左邊框。
solid	它設置一個實心的左邊框。
double	它設置了一個雙邊框。
groove	它設置一個3D帶凹槽的左邊框。
ridge	它設置了一個3D脊狀的左邊框。
inset	它設置3D插入左邊框。
outset	它設置3D起始左邊框。
initial	它將border-left-style屬性設置為其默認值。
inherit	它從其父元素繼承屬性值。

返回值：它返回元素的左邊框樣式。

示例1：顯示虛線的左邊框。

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            border-left-style:dotted; 
        } 
          
        div { 
            border-style:solid; 
            border-left-style:dotted; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>Geeks for Geeks</h1> 
  
    <div> 
        <h3>Dotted Left Border</h3></div> 
  
</body> 
  
</html>

輸出：

示例2：顯示雙左邊框

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            border-left-style:double; 
        } 
          
        div { 
            border-style:solid; 
            border-left-style:double; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>Geeks for Geeks</h1> 
  
    <div> 
        <h3>Double Left Border</h3></div> 
  
</body> 
  
</html>

輸出：

示例3：顯示實心左邊框

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            border-left-style:solid; 
        } 
          
        div { 
            border-style:solid; 
            border-left-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>Geeks for Geeks</h1> 
  
    <div> 
        <h3>Solid Left Border</h3></div> 
  
</body> 
  
</html>

輸出：

支持的瀏覽器：下麵列出了CSS Border Left Style屬性支持的瀏覽器：

穀歌瀏覽器
火狐瀏覽器
IE瀏覽器
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自riarawal99大神的英文原創作品 CSS | border-left-style Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。