css border边框颜色渐变

### 使用 CSS 实现边框颜色渐变

#### 方法一：使用 `border-image` 属性

通过 `border-image` 可以轻松实现复杂的边框样式，包括渐变效果。此方法允许指定一个图像来绘制边框，而线性渐变正是其中一种形式。

.gradient-border {
    border-width: 10px;
    border-style: solid;
    /* 定义边框为线性渐变 */
    border-image-source: linear-gradient(to right, red , yellow);
    border-image-slice: 1;
}

这种方法适用于希望整个页面风格统一的情况下应用相同的渐变模式[^1]。

#### 方法二：利用伪元素与背景渐变组合

另一种常见做法是借助 HTML 元素的 ::before 或 ::after 伪类，在这些伪层上施加渐变背景并调整其位置使之看起来像是目标元素自身的边框。

<div class="pseudo-element-gradient">
</div>

.pseudo-element-gradient {
    position: relative;
}

.pseudo-element-gradient::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%,rgba(255,187,0,1) 100%);
    z-index: -1;
    border-radius: inherit;
}

这种方式提供了更大的灵活性，可以更精细地控制各个方向上的不同渐变效果[^2]。