css边框渐变

/* 使用 CSS 实现边框渐变效果 */

/* 示例 1: 使用伪元素实现边框渐变 */
.element {
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.element::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff6b6b, #f9d423);
    border-radius: 5px;
    z-index: -1;
}

/* 示例 2: 使用 box-shadow 模拟渐变边框 */
.element-alt {
    padding: 20px;
    background-color: #fff;
    box-shadow: 
        0 0 0 2px #ff6b6b,
        0 0 0 4px #f9d423;
    border-radius: 5px;
}

解释说明：

1. 示例 1:

   • 使用 ::before 伪元素来创建一个覆盖在 .element 外部的渐变背景。
   • position: absolute 和负的 top, left, right, bottom 值确保伪元素包围主元素。
   • linear-gradient(45deg, #ff6b6b, #f9d423) 创建了一个从红色到黄色的线性渐变。
   • z-index: -1 确保伪元素在主元素的下方。

2. 示例 2:

   • 使用 box-shadow 属性模拟渐变边框效果。
   • 通过叠加多个阴影层，可以创建出类似渐变边框的效果。
   • border-radius 使边框圆角化，看起来更美观。