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;，即在所有方面设置边框

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用:after：pseudo-element来执行此操作。

＆＃13;

.bottom-to-top {
  position: relative;
  width: 200px;
  height: 50px;
}
.bottom-to-top:after {
  position: absolute;
  right: 0;
  content: '';
  height: 100%;
  width: 3px;
  background: linear-gradient(to top, black, transparent);
}

＆＃13;

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

＆＃13;

CSS底部右边框渐变到透明

2 个答案: