HTML | DOM 样式 borderBottomStyle 属性

HTML DOM 中的 style borderBottomStyle属性用于设置或返回元素底部边框的样式。

句法：

• 它返回底部边框的样式。

  object.style.borderBottomStyle

• 它设置底部边框的样式。

  border-bottom-style: value;

属性值：

• none：它是默认值，它使底部边框的宽度为零。因此，它是不可见的。
• hidden：用于使底部边框不可见。除了表格元素的边界冲突解决方案外，它类似于 none 值。
• dotted：指定虚线边框。
• dashed：指定虚线边框。
• 实心：它指定实心边框。
• double：使底部边框变为双实线。在这种情况下，边框宽度等于两条线段的宽度和它们之间的空间的总和。
• 凹槽：它指定一个 3D 凹槽边框，但此效果取决于边框颜色值。
• ridge：它指定了一个 3D 脊状边框，但此效果取决于边框颜色值。
• inset：它指定一个 3D 插入边框，但此效果取决于边框颜色值。
• outset：它指定一个 3D 起始边框，但此效果取决于边框颜色值。
• 初始：将 borderBottomStyle 属性设置为其默认值。
• 继承：这从其父元素继承属性。

返回值：返回选中样式的下边框。

示例 1：此示例描述了 borderBottomStyle 属性的虚线值。

    
        HTML | DOM Style borderBottomStyle Property
    
    
        div {
            color: green;
            text-align: center;
            border: 4px solid green;
        }
    

  

    
        GeeksforGeeks.!
    
    
      
    
          
    
        function geeks() {
            document.getElementById("main").style.borderBottomStyle
                    = "dotted";
        }
    

                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 2：此示例描述了 borderBottomStyle 属性的 double 值。

  

    
        HTML | DOM Style borderBottomStyle Property
    
    
        div {
            color: green;
            text-align: center;
            border: 4px solid green;
        }
    

  

    
        GeeksforGeeks.!
    
    
      
    
          
    
        function geeks() {
            document.getElementById("main").style.borderBottomStyle 
                    = "double";
        }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

支持的浏览器： DOM 样式 borderBottomStyle 属性支持的浏览器如下：

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