首页 > Web开发 > 详细

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

时间:2018-08-27 16:40:59      阅读:262      评论:0      收藏:0      [点我收藏+]

 

<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 控制效果后便是这样,上面部分会带模糊效果。因为都是白色,并不是很明显。

 

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

原文:https://www.cnblogs.com/JaneBlog/p/9542783.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!