具有渐变和边框的元素

Question

我有这样的html

<div class="bottom-content">
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content
Here goes some content 
</div>

和这样的CSS

.bottom-content{
  width: 100%;
  height: 19px;
  border-top: 1px rgba(red, 0.2);
  box-shadow: 0 -19px 19px 0 blue !important;
  opacity: .6;
}

问题是必须具有某种渐变和边界，这样整个元素都变得不透明

这是边界或底部渐变的外观

Answer 1

对于模糊滤镜来说，这听起来不错：

.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  filter:blur(6px);
}

<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>

像下面这样仅用于边界：
 
.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:8px solid lightblue;
  filter:blur(5px);
}
<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>
而且它仅适用于一个边界：
 
.bottom-content {
  padding:10px;
  position:relative;
  z-index:0;
}
.bottom-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-bottom:8px solid lightblue;
  filter:blur(5px);
}
<div class="bottom-content">
  Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content Here goes some content
</div>