Question

我要做的是在CSS中制作类似this thick line的内容。

我如何在CSS中重新创建该行，使其成为div的右边界？
我如何让淡出的线条淡出（所以looks like this）？

感谢。

Answer 1

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

那可以做你想要的吗？

这个方法绝对将一个（伪）元素与你的渐变渐变（白色到透明）放在另一个（伪）元素上，并带有双边框（和一个轻微的渐变阴影，正如你在评论中提到的那样）。 / p>

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;
}

褪色垂直线

2 个答案: