如何使用延伸100%高度的渐变效果在html/css中创建垂直边框

因此，我正在为我所属的俱乐部构建一个布局，无论如何，我使用的布局有一种效果，即边框沿着整个页面的侧面延伸，但在顶部和底部附近使用渐变进行篡改。这里是布局-我指的是页面左侧的软阴影：

我通常认为自己相当精通HTML/CSS，但我真的在努力完成这项工作。如果不在父容器上明确指定高度，我就无法在主体展开时拉伸边框。有了侧边渐变，我们真的有3个部分-顶部需要停靠到容器顶部，底部停靠到页面底部-两者都可以设置为静态高度，中间部分保持纯色，但需要根据页面高度进行拉伸

---

任何帮助都将被占用。我总是觉得基于高度的缩放在html中有点笨拙。

一个可能的选择是使用绝对定位的生成内容（

:before

表示左侧“边框”，而

:before

表示右侧边框）具有100%的高度并作为生成的伪元素的背景。对于IE9及更低版本，常规单色边框可用作备用

---

请参阅工作示例。

聪明的方法是使用，特别是

边框图像。浏览器支持并非十全十美，但由于这是一个非常不必要的效果，稍微适当的降级不会影响整体性能的提高

这里有一点

我使用了它将编译成CSS（缩小！），并为您处理供应商前缀：

div  
  border-width: 3px
  +border-image(linear-gradient(top, rgba(0,0,0,0), black, black, rgba(0,0,0,0)) 1 100%) 

但是，如果你是受虐狂，你可以手工制作CSS：

div {
border-width: 3px;
-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #000000), color-stop(66.66667%, #000000), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;}

如果这对您不起作用，请查看CSS技巧上的其他一些技术，或者使用图像。
您是否可以举一个这样的例子（或类似的例子）？从未使用：在选择器实现这一点之前，有点困惑这将如何适合。当然。我在回答中添加了现场演示。