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