底漆 CSS 颜色 边框颜色

Primer CSS是一个免费的开源 CSS 框架，它建立在 GitHub 设计系统之上，为广泛的 Github 网站提供支持。它为间距、排版和颜色等基本样式元素奠定了基础。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。这是一个高度可重用的模型。

在本文中，我们将了解 Primer CSS 中的边框颜色元素。 Primer CSS 的一个这样的样式元素是边框颜色。顾名思义，边框颜色用于为元素的边框着色。

类：下面是 Primer CSS 中所有边框颜色类及其颜色的给定列表：

• .color-border-default –此类将默认的灰色边框颜色应用于元素。它是默认应用的。
• .color-border-overlay –应用此类时，会为元素的边框颜色提供稍暗的白色阴影。
• .color-border-emphasis –应用此类时，为元素的边框颜色提供深黑色。
• .color-border-accent –应用此类时，为元素的边框颜色赋予浅蓝色。
• .color-border-accent-emphasis –应用此类时，为元素的边框颜色提供深蓝色。
• .color-border-success –应用此类时，为元素的边框颜色提供浅绿色。
• .color-border-success-emphasis –应用此类时，为元素的边框颜色提供深绿色。
• .color-border-attention –应用此类时，会为元素的边框颜色赋予浅黄色。
• .color-border-attention-emphasis –应用此类时，会为元素的边框颜色提供深黄色。
• .color-border-severe –应用此类时，为元素的边框颜色提供浅棕色。
• .color-border-severe-emphasis –应用此类时，为元素的边框颜色提供深棕色。
• .color-border-danger –应用此类时，为元素的边框颜色赋予浅红色。
• .color-border-danger-emphasis –应用此类时，为元素的边框颜色提供深红色。
• .color-border-done –应用此类时，会为元素的边框颜色提供浅紫色。
• .color-border-done-emphasis –应用此类时，为元素的边框颜色提供深紫色。
• .color-border-sponsors –应用此类时，会为元素的边框颜色赋予浅粉色。
• .color-border-sponsors-emphasis –应用此类时，会为元素的边框颜色提供深粉色。

句法：

笔记：
1. Primer CSS 默认为元素的边框提供颜色。向元素添加边框类有助于覆盖默认值。
2. 这里我们展示了使用

元素的示例和语法，但您可以使用任何元素。

示例 1：在下面的示例中，我们创建了三个带有文本的框，并在底漆边框颜色类的帮助下为它们赋予了不同的边框颜色。

完整代码：

HTML

    
    

  

    

        
GeeksforGeeks
        
Primer CSS Border Color
        

            This is the first text box with sample text. 
            This article will be published in GeeksforGeeks website.
        
        

            This is the second text box with sample text. 
            This article will be published in GeeksforGeeks website.
        
    

输出：

示例 2：我们使用 Primer CSS 类为按钮添加了不同颜色的边框。

完整代码：

HTML

    
    

  

    

        
GeeksforGeeks
        
Primer CSS Border Color
        
            Button 1
        
        
            Button 2
        
    

输出：

参考： https://primer.style/css/utilities/colors#border