如何创建带#2CA05A渐变的3D效果圆角边框？

要实现从#2CA05A绿色渐变到透明、带3D质感的30px圆角边框，你可以通过伪元素 + 渐变 + 遮罩的方式实现，避开border-image无法兼容圆角的问题。以下是优化后的代码：

.new-feature-card {
  box-sizing: border-box;
  position: relative;
  width: 345px;
  height: 207px;
  background: rgba(255, 255, 255, 0.9); /* 可按需调整背景色 */
  backdrop-filter: blur(8px);
  border-radius: 30px;
  padding: 1px; /* 为伪元素边框预留空间 */
}

.new-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 2px; /* 控制边框厚度 */
  background: linear-gradient(135deg, #2CA05A, transparent); /* 绿色到透明的渐变 */
  /* 利用遮罩实现边框镂空效果，兼容圆角 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transform: translate(1px, 1px); /* 轻微偏移增强3D立体感 */
}

核心逻辑说明： #

• 容器设置padding:1px，让伪元素的边框能显示在容器边缘
• 伪元素::before铺满容器，通过padding定义边框宽度，渐变作为边框颜色
• 遮罩（mask）技术实现“只显示边框区域渐变”的效果，完美适配圆角
• 轻微的transform偏移模拟立体阴影，强化3D视觉

如果需要更突出的3D效果，可追加一层伪元素做深色阴影层：

.new-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
  z-index: -1;
  transform: translate(2px, 2px);
}

内容的提问来源于stack exchange，提问作者Ethan Diedericks