CSS边框线性渐变透明：为何左下/右下边框渐变且border-radius失效？

1. border-radius 不生效的原因 #

CSS 里 border-image 属性会直接覆盖 border-radius 的效果，两者无法同时生效。只要给元素设置了 border-image，浏览器就会忽略圆角声明。

2. 边框渐变褪色的原因 #

• 你给 .navCenter 设置的 opacity: 0.57 是作用于整个元素，包括边框，这会让边框整体透明度降低，视觉上呈现褪色效果。
• 仅给左、右、下边框应用 border-image，且渐变方向为180度（从上到下），这种组合会导致边角处的渐变显示不符合预期，进一步加重褪色感。

修复方案 #

改用伪元素实现带圆角的渐变边框 #

放弃 border-image，用伪元素模拟渐变边框，既能保留圆角，又能避免透明度影响边框：

修改后的 CSS 代码：

.navCenter {
  width: 228px;
  height: 73px;
  position: absolute;
  left: 847px;
  display: flex;
  border-radius: 0 0 15px 15px;
  align-items: center;
  /* 将透明度整合到背景色的rgba中，避免影响边框 */
  background: radial-gradient(48.32% 109.64% at 50% 49.4%, rgba(231, 231, 231, 0.22) 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 255, 255, 0.04);
  justify-content: center;
  padding: 1px;
  box-sizing: border-box;
}

/* 伪元素实现渐变边框 */
.navCenter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(232, 232, 232, 0.308), rgba(232, 232, 232, 1));
  /* 只显示左、右、下三条边框 */
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

.btn-loging {
  width: 93px;
  height: 38px;
  background: linear-gradient(135deg, #e5a475, #e5a47500);
  font-weight: bolder;
  border-radius: 5px;
  border-color: #e5a475;
  border-width: 1.5px;
  box-shadow: 0 0 24px #e5a47555;
  /* 确保按钮在伪元素上方 */
  position: relative;
  z-index: 1;
}

关键说明 #

• 用 ::before 伪元素生成渐变背景，通过 clip-path 裁剪出左、右、下三条边框，同时继承父元素的圆角属性。
• 移除全局 opacity，将透明度直接写在背景色的 rgba 值里，避免边框被透明化。
• 给按钮设置层级，确保它不会被伪元素遮挡。

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