带示例的引导程序中的边框

边框：边框通常用于在框或表格单元格或任何其他 HTML 元素周围显示轮廓。在 Bootstrap 中，有不同的类可用于添加或删除边框。用于添加边框的类称为Additive 类，用于删除边框的类称为减类。

添加边界类：

• .border ：这个类在元素周围添加一个边框。
• .border-top ：此类在元素的上边缘添加边框。
• .border-left ：此类在元素的左边缘添加边框。
• .border-right ：该类在元素右侧添加边框。
• .border-bottom ：该类在元素底部添加边框。

减法边界类：

• .border-0 ：这个类从元素周围移除边框(如果存在)。
• .border-top-0 ：这个类从元素的顶部边缘移除边框(如果存在)。
• .border-left-0 ：这个类从元素的左边缘移除边框(如果存在)。
• .border-right-0 ：该类从元素右侧移除边框(如果存在)。
• .border-bottom-0 ：该类从元素底部移除边框(如果存在)。

下面的程序使用所有的加法和减法类来添加和删除边框：

    
        Bootstrap Example
          
        
        
          
        
        
        
        
        
            /* CSS for Square boxes */
            span {
                display: inline-block;
                width: 70px;
                height: 70px;
                margin: 6px;
                background-color: #DCDCDC;
            }
        
    
      
    
          
        
        
        
            Additive Border Classes
            
            
            
            
            
        
          
        
        
        
            Subtractive Border Classes
            
            
            
            
            
            
        
          
    

输出：

边框颜色

可以使用 bootstrap 中提供的以下边框颜色类将任何颜色添加到边框。如果您想要任何其他自定义颜色，则可以使用 CSS 属性手动设置它。

    
        Bootstrap Example
          
        
        
          
            
        
        
        
          
        
            /* CSS style for Boxes */
            span {
                display: inline-block;
                width: 70px;
                height: 70px;
                margin: 6px;
                background-color: #DCDCDC;
            }
        
    
      
    
        
            Borders
            Color Border:
            
            
            
            
            
            
            
            
        
    

输出：

边框半径：边框半径用于使边框的拐角弯曲。半径越大，它就会越弯曲和圆。
在引导程序中，代码中使用的以下类用于实现特定角处的半径。

    
        Bootstrap Example
          
        
        
          
        
        
        
        
         
        
            /* CSS Style for Boxes */
            span {
                display: inline-block;
                width: 70px;
                height: 70px;
                margin: 6px;
                background-color: #DCDCDC;
            }
        
    
    
        
            Border Radius
              
            
            
            
            
            
            
            
            
        
    

输出：

参考：https://getbootstrap.com/docs/4.0/utilities/borders/