具有渐变和边框的元素

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>

具有渐变和边框的元素

Element with gradient and border

css

gradient

linear-gradients