【网摘自CSDN网站】当文本内容过多，展开更多 （css控制,）

 

<div class="more"><p class="btn">显示全部内容</p></div>

 

.more {
display:none;padding-top:80px;
background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),color-stop(70%,#fff));
background-image:linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
position:absolute;bottom:.42rem;width:100%;}
.btn{color:#3196F7;letter-spacing:1px;font-size:.14rem;height:.4rem;line-height:.4rem;}

 

重点是： background-image:linear-gradient，与 padding-top 

 

 

css 控制效果后便是这样，上面部分会带模糊效果。因为都是白色，并不是很明显。