html - 渐变垂直线

Question

我正在尝试做的是在 CSS中制作类似这条粗线的东西。

1. 我将如何在 CSS 中重新创建该行，使其成为 div 的右边框？
2. 我如何使行的顶部淡出（看起来像这样）？

谢谢。

Answer 1

看看这个：http ://codepen.io/MisterGrumpyPants/pen/yEzpd

这是否符合您的要求？

那里的方法是将一个（伪）元素与您的渐变渐变（白色到透明）绝对定位在另一个（伪）元素与您的双边框（和轻微的渐变阴影，正如您在评论中提到的）。

Answer 2

如果您可以使用线性渐变：

http://codepen.io/anon/pen/AucdB

.fade {
  padding:5px 15px;
  background:
    linear-gradient(180deg ,  white 30%, rgba(255,255,255,0)) repeat,
    linear-gradient(90deg ,  black 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0)) no-repeat,
    linear-gradient(90deg , rgba(255,255,255,0) 5px,black 5px, black 6px, rgba(255,255,255,0) 6px, rgba(255,255,255,0)) no-repeat;
  background-color:white;
}