入门 CSS 框行主题

Primer CSS Box 是一个容器，具有白色背景、圆角和四个边的灰色边框。

在本文中，我们将看到Primer CSS Box Row Themes 。可以单独更改框中每一行的背景颜色。我们还可以在悬停或导航焦点上指定行颜色。

Primer CSS Box Row 主题类：

• Box-row-gray：该类用于设置行的背景颜色为灰色。
• Box-row-hover-gray：该类用于设置行的悬停颜色为灰色。
• Box-row-focus-gray：该类用于设置行的焦点颜色为灰色。
• Box-row–blue：该类用于将行的背景颜色设置为蓝色。
• Box-row-hover-blue：该类用于将行的悬停颜色设置为蓝色。
• Box-row-focus-blue：该类用于将行的焦点颜色设置为蓝色。
• Box-row-yellow：该类用于设置行的背景颜色为黄色。

注意：当行还具有导航焦点类时，焦点颜色类会激活。当您想使用某些事件来聚焦行时，可以使用此选项。

句法：

      

        ...
      

示例 1：此示例展示了如何使用上面提到的背景和悬停颜色类。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        Primer CSS - Row Themes
    
    

        
        

            

                Gray box row
            
            

                This row will turn gray when hovered
            
            

                Blue Box Row
            
            

                This row will turn blue when hovered
            
            

                Yellow box row
            
        
       
    

输出：

示例 2：此示例显示了使用和不使用导航焦点类的焦点颜色类。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS - Row Themes
    
    

        
        

            

                Gray Focus color class without navigation focus
            
            

                Blue Focus color class without navigation focus
            
            

                Gray Focus color class with navigation focus
            
            

                Blue Focus color class with navigation focus
            
        
       
    

输出：

参考： https://primer.style/css/components/box#row-themes