问题css边框线性渐变透明度

Question

为什么左下右下边框淡化？ 我想设计这张照片。但我不知道为什么我的代码中的 border-radius 是 fade

 <div class="navCenter">
                <button class="btn-loging"><span style="color: white;">LOGIN</span></button>
            </div>

.navCenter {
  width: 228px;
  height: 73px;
  position: absolute;
  left: 847px;
  display: flex;
  border-left:1px solid ;
  border-right:1px solid ;
  border-bottom:1px solid;
border-image: linear-gradient(180deg, rgba(232, 232, 232, 0.308), rgba(232, 232, 232, 1)) 1;
  border-radius: 0px 0px 15px 15px;
  opacity: 0.57;
  align-items: center;
  background: radial-gradient(48.32% 109.64% at 50% 49.4%, rgba(231, 231, 231, 0.22) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.04);
  justify-content: center;
}

.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: 0px 0px 24px 0px #e5a47555;
}

Answer 1

我认为这对于边界半径是不可能的。这是一个小解决方法，您可以如何做到这一点：

body {
  background: #333;
}
.navBorder {
  background: linear-gradient(180deg, rgba(232, 232, 232, 0.1), rgba(232, 232, 232, 1));
  width: 228px;
  height: 73px;
  position: absolute;
  left: 20px;
  opacity: 0.57;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}
.navBackground {
  background: #333;
  position: absolute;
  left: 1px;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}
.navCenter {
  position: absolute;
  left: 1px;
  top: 0;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  display: flex;
  align-items: center;
  background: radial-gradient(48.32% 109.64% at 50% 49.4%, rgba(231, 231, 231, 0.22) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.1);
  justify-content: center;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}

.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: 0px 0px 24px 0px #e5a47555;
}

<div class="navBorder">
  <div class="navBackground">
    <div class="navCenter">
      <button class="btn-loging"><span style="color: white;">LOGIN</span></button>
    </div>
  </div>
</div>