带线性渐变边框、圆角及线性渐变背景的元素样式问题

我需要实现一个带有线性渐变边框、线性渐变背景且具备圆角的盒子，目前已编写如下代码，但边框效果不理想，希望得到优化方案。

原始代码 #

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%) !important;
  background-origin: border-box !important;
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
height: 250px;
padding: 40px;
}

.demo-mode .box {
  color: #fff !important;
  border-radius: 8px !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-image-source: linear-gradient(
    91.7deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.05) 100%
  ) !important;
  background-origin: border-box !important;
  border-image-slice: 1 !important;
  background-image:  linear-gradient(to right, #ffffff0a, #ffffff03),
  linear-gradient(to right, #ffffff10, #ffffff03) !important;
  background-clip: content-box, border-box !important;
  padding: 0;
  width: 150px;
  height: 30px;
  text-align: center;
}

<div class="demo-mode">
<div class="box">
Hello
</div>
</div>

问题根源 #

你用border-image实现渐变边框，但这个属性和border-radius存在兼容性问题——设置圆角后，渐变边框不会自动适配圆角，导致边框直角和盒子圆角冲突，视觉效果割裂。

优化方案一：多层背景+background-clip实现（无额外元素） #

通过叠加背景层，用background-clip控制显示区域，模拟渐变边框，完美适配圆角。

.demo-mode {
  background-color: #111026;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  background-origin: border-box;
  border-radius: 24px;
  width: 250px;
  height: 250px;
  padding: 40px;
}

.demo-mode .box {
  color: #fff;
  border-radius: 8px;
  width: 150px;
  height: 30px;
  text-align: center;
  line-height: 30px; /* 文字垂直居中 */
  /* 核心：两层背景分别实现内容渐变和边框渐变 */
  background: 
    linear-gradient(to right, #ffffff0a, #ffffff03),
    linear-gradient(91.7deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
  background-clip: content-box, border-box;
  border: 1px solid transparent; /* 保持布局一致性 */
}

优化方案二：伪元素实现（灵活适配复杂场景） #

用伪元素生成一个比原盒子大1px的渐变层作为边框，原盒子放在上方作为内容层，完全独立控制边框和背景，适配圆角无压力。

.demo-mode {
  background-color: #111026;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  background-origin: border-box;
  border-radius: 24px;
  width: 250px;
  height: 250px;
  padding: 40px;
}

.demo-mode .box {
  color: #fff;
  border-radius: 8px;
  width: 150px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(to right, #ffffff0a, #ffffff03);
  position: relative;
  z-index: 1; /* 确保内容在边框上层 */
}

/* 伪元素做渐变边框 */
.demo-mode .box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(91.7deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 8px;
  z-index: -1; /* 边框在内容下层 */
}

方案对比 #

• 方案一：代码简洁，无额外元素，适合简单场景；依赖background-clip精准控制显示区域，适配圆角效果完美。
• 方案二：灵活性更高，边框和背景可完全独立调整，适合需要多层边框、阴影叠加等复杂效果的场景。

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