渐变圆角边框

渐变圆角边框

HTML

<div class="wrapper">
  <div class="container">
    <div class="box method-1">方法一：伪元素方案</div>
    <div class="box method-2">方法二：多重背景方案</div>
    <div class="box method-3">方法三：mask方案</div>
  </div>
</div>

css

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  min-height: 150px;
  padding: 10px;
}

.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-weight: bold;
  width: 200px;
  height: 100px;
}

/* 方法一 */
.method-1 {
  position: relative;
  border-radius: 16px;
  padding: 2px;
  background: white;
}

.method-1::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
}

/* 方法二 */
.method-2 {
  border-radius: 16px;
  padding: 2px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, #ff00cc, #3333ff) border-box;
  border: 2px solid transparent;
}

/* 方法三 */
.method-3 {
  position: relative;
  border-radius: 16px;
  background: white;
}

.method-3::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

1、伪元素方案（兼容性好）

优点：

• 兼容所有现代浏览器
• 实现原理简单直观
• 边框宽度容易调整

缺点：

• 需要额外伪元素
• 圆角半径需要手动计算

.method-1 {
  position: relative;
  border-radius: 16px;
  padding: 2px;
  background: white;
}

.method-1::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
}

2、多重背景方案（代码简洁）🔥

优点：

• 代码简洁
• 不需要伪元素
• 利用标准CSS特性

缺点：

• 需要理解background-clip概念
• 旧版浏览器支持有限

.method-2 {
  border-radius: 16px;
  padding: 2px;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, #ff00cc, #3333ff) border-box;
  border: 2px solid transparent;
}

3、mask方案（现代浏览器）

优点：

• 最灵活的解决方案
• 支持复杂渐变效果

缺点：

• 浏览器兼容性较新
• 语法相对复杂

.method-3 {
  position: relative;
  border-radius: 16px;
  background: white;
}

.method-3::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}