html - CSS 右下边框渐变透明

Question

我需要设置一个从下到上透明的黑色边框，但只在右侧。

这段代码部分地完成了我需要的，但我不知道如何让它在左侧消失，所以只有右侧有边框......

.bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

Answer 1

只需将 border-width: 3px; 更改为 border-width: 0 3px 0 0; 你在所有边上都设置了边框

.bottom-to-top {
  width: 200px;
  height: 100px;
  border-width: 0 3px 0 0;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

<div class="bottom-to-top"></div>