css 渐变色圆形边框

CSS 渐变色圆形边框可以使用 CSS 的 `border-radius` 属性结合渐变颜色（gradient）背景属性来创建。这种设计通常用于增加网站元素的视觉吸引力并提供更丰富的用户体验。

下面是一个简单的例子来说明如何创建一个有渐变色圆形边框的 div 元素：

/* 设置渐变背景 */
div.gradient-border {
    background-image: linear-gradient(to right top, red, yellow);
    
    /* 使用 border-radius 实现圆形边框 */
    border-radius: 50%;
}

/* 可能需要设置一些额外的样式以便看到效果 */
div.gradient-border {
    width: 100px;
    height: 100px;
}

在这个例子中：
1. 我们首先定义了一个名为 `.gradient-border` 的类，该类将包含我们的样式规则。
2. `background-image` 属性设置了线性渐变背景。这里是从左上角到右下角的颜色变化，从红色开始，逐渐过渡到黄色。
3. `border-radius` 属性将所有四个角都设置为半径等于圆半径的一半，也就是 `50%`。这使得 div 元素呈现为一个完美的圆形。
4. 为了清晰地展示出圆形的效果，我们还给这个 div 设置了固定尺寸，宽度和高度均为 `100px`。

--- 相关问题 ---
1. 能否使用其他形状作为边界而不是圆形？
2. 渐变色可以自定义吗？例如添加更多色彩或调整渐变方向？
3. 如何让渐变色边框保持响应式设计，即适应不同屏幕尺寸？