css实现内容渐变隐藏效果代码

.box{
    height:500px;
    width:500px;
    position:relative;// 这个非常重要
}
 
.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);
}

html代码

<div class="box">
    <div class="content">
    我是功夫码的示例文字，我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字我是功夫码的示例文字
    我是功夫码的示例文字
    <div>
    /*遮罩层 */
    <div class="mask"></div>
</div>