要在 CSS 中创建带有渐变效果的边框，可以使用 `border-image` 属性结合线性渐变或径向渐变。
1. 线性渐变边框：
使用 `linear-gradient()` 函数创建线性渐变，并将其作为 `border-image` 的参数。然后设置 `border-width` 和 `border-image-slice` 来确定边框的宽度和图像切片。
示例：
.linear-gradient-border {
border-width: 5px;
border-image: linear-gradient(to right, red, blue) 1;
border-image-slice: 100%;
}
上面给出的代码将创建一个从左到右渐变的边框，边框宽度为 5 像素，颜色由红色渐变到蓝色。
2. 径向渐变边框：
使用 `radial-gradient()` 函数创建径向渐变，并将其作为 `border-image` 的参数。然后设置 `border-width` 和 `border-image-slice` 来确定边框的宽度和图像切片。
示例：
.radial-gradient-border {
border-width: 5px;
border-image: radial-gradient(circle at center, yellow, green) 1;
border-image-slice: 100%;
}
上面给出的代码将创建一个从黄色到绿色的径向渐变边框，边框宽度为 5 像素。
你可以根据需要自定义渐变的颜色、方向和样式。还可以调整 `border-width` 的值来改变边框的宽度。
土嘎嘎技术网友情提示：支持 `border-image` 属性的浏览器可能有所不同，建议使用浏览器兼容性前缀或提供备用的边框样式作为回退选项。