CSS | border-bottom-style 属性

CSS中的border-bottom-style属性用于设置元素下边框的样式。

句法：

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

属性值：

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

• 句法：

  border-bottom-style: none;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

hidden：用于使底部边框不可见。除了表格元素的边界冲突解决方案外，它类似于 none 值。

• 句法：

  border-bottom-style: hidden;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                    
      
  

• 输出：
  

dotted：它使底部边框带有一系列点。

• 句法：

  border-bottom-style: dotted;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

虚线：它用一系列短线段制作底部边框。

• 句法：

  border-bottom-style: dashed;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

solid：用于用单条实线段制作底部边框。

• 句法：

  border-bottom-style: solid;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

double：使底部边框变为双实线。在这种情况下，边框宽度等于两条线段的宽度和它们之间的空间的总和。

• 句法：

  border-bottom-style: double;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

凹槽：使底部边框带有凹槽线段，让人有往里走的感觉。

• 句法：

  border-bottom-style: groove;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                                   
  

• 输出：
  

inset：使底部边框嵌入线段，给人一种深深固定在屏幕上的感觉。

• 句法：

  border-bottom-style: inset;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                                   
  

• 输出：
  

起点：与插图相反。它使底部边框带有一条线段，看起来要出来了。

• 句法：

  border-bottom-style: outset;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                                   
  

• 输出：
  

初始：它将边框底部样式属性设置为其默认值。

• 句法：

  border-bottom-style: initial;

• 例子：

   
   
       
           
        
          
           
        
       
        
       
          
          
  GeeksForGeeks
   
       
                       
  

• 输出：
  

继承：要从其父元素继承的边框底部样式属性。

• 句法：

  border-bottom-style: inherit;

• 例子：

   
   
       
           
        
          
           
       
        
       
          
  
                
              
              
  GeeksForGeeks
   
          
       
                       
  

• 输出：
  

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

• 谷歌浏览器 1.0
• 互联网浏览器 5.5
• 火狐 1.0
• 歌剧 9.2
• Safari 1.0