现在很多网站都采用了一种效果，就是在展示长篇文章时，只显示部分内容，并在底部加上一个“展开”按钮，点击后可以展示全部内容。这种效果可以很好地提高用户体验和阅读效果。下面我将介绍一种制作这种效果的方法。
第一步是创建点击按钮的HTML代码：
<div class="LookMore">展开全部</div>
第二步是设置点击按钮的样式：
.LookMore {
width: 140px;
margin: 20px auto;
height: 34px;
line-height: 32px;
text-align: center;
border-radius: 15px;
border: 1px solid #c7d1d6;
background-color: #eee;
color: #4dba50;
}第三步是制作渐隐效果，原理是使用一个遮罩层并设置透明度：
<div class="gradient"></div>
第四步是设置遮罩层的样式：
.gradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(#fff));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
background-image: linear-gradient(-180deg, rgba(255,255,255,0), #fff);
height: 140px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}第五步是通过JavaScript代码实现点击展开全部内容的效果：
$(".LookMore").click(function() {
$(".xwz-con-buzou").css("height", "auto");
$(".LookMore, .gradient").css("display", "none");
});通过以上几个步骤，你就可以在自己的网站上实现文章渐隐和点击展开按钮的效果了。
