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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。