看到一個需求，如下圖，知乎手機網頁版的一個視覺效果，對內容很長的部分有一個漸變的隱藏的效果，個人覺得這個設計還是很好的，符合手機大小的應用場景，沒有一下子顯示完全，可以很快的滑倒頁面底部，一定程度上減少了滑動時間，用戶體驗很好，對整個頁面有一個大概的預覽，強迫症會感覺很爽。
具體怎么實現這個效果，分析一下：
可以看出來是一個漸變的效果，從上往下顏色變白，我們知道在css3中有兩種漸變：線性（linear-gradient）和徑向（radial-gradient），很明顯這里屬於線性漸變。
漸變這種效果其實是一個圖片的樣子，我們可以設置一張上下透明的背景圖，定位在文字上，沒有漸變之前可以用這種方法。css3有了漸變，我們可以直接使用，漸變可以應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變相當於背景圖片。
background-image: linear-gradient(str1,str2,str3);
漸變中共有三個參數，第一個數數表示線性漸變的方向，第二個和第三個參數分別是起點顏色和終點顏色。
方案一：
HTML：
<div class="show_text">
<p>看到一個需求，如圖，知乎手機網頁版的一個視覺效果，對問題很長的部分會有被漸變的覆蓋的效果，個人覺得這個設計還是很好的，符合手機大小的應用場........</p>
</div>
<div class="mask"></div>
CSS:
body{
position: relative;
}
.show_text{
width: 620px;
margin:0 auto;
}
.mask{
width:620px;
position: absolute;
top:0;
height: 71px;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
}
效果圖：
hsla(0,0%,100%,0) 也可以使用 rgba(255,255,255,0)代替；
對hsal比較陌生可以點擊【第169期】背景透明，文字不透明的解決方案
參看有關rgba()和hsal()的應用介紹
首先我們找個巨人，然后站在他的肩膀上
方案二：
在幾年前張大神的博客中也有類似的效果，他寫的效果是對文字本身進行漸變，也是一種思路，借鑒過來使用，字體顏色為黑色，可以設置黑色到白色的上下漸變。
p{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(25, 27, 25)), to(rgb(245, 244, 244)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
后兩種屬性兼容性不是很好。
chrome下效果圖
視覺上差別不是特別大
推薦使用方案一。
后記：
在這個大前端時代，相比各種火熱的前端框架，CSS雖簡單，也是容易被忽略，想要對CSS有一個比較深的掌握也是需要下大功夫的。在追趕大潮趨勢下，我們也要打好深厚的基礎，js也是，萬變不離其宗。