使用 CSS 设置轮廓颜色

什么是CSS轮廓

CSS轮廓（outline）是一种用于设置 HTML 元素外部边框的图形属性。它类似于边框（border）属性，但又有所不同。

与边框不同的是，轮廓不占用空间，不会影响元素的尺寸和位置。它们通常在用户执行某些操作或者元素处于聚焦状态时显示。

轮廓有四个属性可以设置：轮廓宽度（outline-width）、轮廓样式（outline-style）、轮廓颜色（outline-color）和轮廓偏移（outline-offset）。

如何使用CSS轮廓

设置轮廓宽度

可以使用 outline-width 属性来设置轮廓的宽度，它接受以下值：

thin：细线条；

medium：中等线条（默认值）；

thick：粗线条；

<length>：具体的线条宽度，例如 2px。

以下是一个例子：

    .my-element {
        outline-width: 2px;
    }

设置轮廓样式

可以使用 outline-style 属性来设置轮廓的样式，它接受以下值：

dotted：点状线条；

dashed：虚线条；

solid：实线条（默认值）；

double：双线条；

groove：3D凹槽线条；

ridge：3D凸槽线条；

inset：3D内嵌线条；

outset：3D外嵌线条；

none：无线条；

hidden：隐藏线条。

以下是一个例子：

    .my-element {
        outline-style: dotted;
    }

设置轮廓颜色

可以使用 outline-color 属性来设置轮廓的颜色，它接受以下值：

<color>：可以是具体的颜色值，例如 red 或者 #000；

inherit：继承父元素的颜色。

以下是一个例子：

    .my-element {
        outline-color: red;
    }

设置轮廓偏移

可以使用 outline-offset 属性来设置轮廓的偏移，它接受以下值：

<length>：可以是正值或者负值，表示从元素边缘向外或者向内偏移的距离。

以下是一个例子：

    .my-element {
        outline-offset: 10px;
    }

使用CSS轮廓实现交互效果

使用 CSS 轮廓，可以为 HTML 元素增加交互效果，例如用户聚焦到一个表单元素时，设置一个明显的蓝色轮廓：

    input:focus {
        outline: 2px solid blue;
    }

另外，轮廓也可以用于实现鼠标悬停时的效果，例如将按钮的轮廓颜色设置为和背景色相同，这样当鼠标悬停在按钮上时，按钮似乎“消失”了：

    .my-button {
        background-color: blue;
        outline: 2px solid blue;
        color: white;
        transition: background-color .3s ease;
    }
    .my-button:hover {
        background-color: white;
        color: blue;
    }
    .my-button:hover::before,
    .my-button:hover::after {
        content: "";
        display: block;
        position: absolute;
        left: -2px;
        top: -2px;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        outline: 2px solid white;
        z-index: -1;
    }

在这个例子中，当鼠标悬停在按钮上时，通过设置一个透明背景的虚拟元素以及将按钮背景色设置为和轮廓颜色相同的方式，实现了一个有趣的“闪烁消失”效果。

结论

CSS 轮廓是一种轻量的样式属性，可以用于为 HTML 元素增加交互效果，例如突出显示用户聚焦的元素或者实现鼠标悬停效果。轮廓不会占用空间，不影响元素的尺寸和位置，是一种十分实用的工具。

如果您想了解更多关于 CSS 轮廓的内容，可以查看MDN 文档。