码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-27 18:15:15      阅读:414      评论:0      收藏:0      [点我收藏+]

标签:bsp   重点   100%   tom   bubuko   sdn   line   rem   rgba   

 

<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控制,)

标签:bsp   重点   100%   tom   bubuko   sdn   line   rem   rgba   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!