褪色垂直线 [英] Fading vertical line

问题描述

我想做的是制作类似 这条粗线 在CSS中。

What I'm trying to do is make something like this thick line in CSS.

1. 如何在CSS中重新创建该行，使其成为div的边框？


2. 如何让顶部的行淡出（因此 看起来像这样 ）？

感谢。

推荐答案

请看这里： http：// codepen。 io / MisterGrumpyPants / pen / yEzpd

这样做是否正在寻找？

方法是使用你的双边框（和一个轻微的渐变阴影，你的评论中提到的）绝对地定位一个（伪）元素与你的渐变渐变（白色到透明）在另一个（伪）元素上。

The method there is to absolutely position one (pseudo)element with your fading gradient (white to transparent) over another (pseudo)element with your double border (and a slight gradient shadow, as you mentioned in your comment).

这篇关于褪色垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！