褪色垂直線

Question

我想要做的是在CSS中製作類似this thick line的東西。

1. 我該如何在CSS中重新創建該行，使其成爲div的右側邊界？
2. 我該如何讓這一行的頂部淡出（所以它looks like this）？

謝謝。

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