一 设计案例
现在很多网站都增加了阅读更多功能。以CSDN为例，分析其实现原理。
二 设计原理
1 内容区的初始高度是固定的。
2 背景渐变的操作区，遮盖在内容区上面
3 点击按钮时，解除内容区的高度限制，同时移除操作区
三 模拟实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
.box {
position: relative;
width: 600px;
}
.box.partial {
height: 96px;
overflow: hidden;
}
.opts {
position: relative;
z-index: 10;
margin-top: -72px;
padding-top:72px;
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%
);
}
</style>
</head>
<body>
<!-- 内容区 -->
<div id="box" class="box partial">
iPhone在中国季度销量增长超过华为
最新的报告中指出，相比去年12月份，iPhone在国内的销量已经出现了明显逆转，而苹果还是中国3大智能手机厂商中（华为、小米和OPPO），唯一一家在3月份实现月度用户基数增长的公司，这与2018年3月份的情况截然不同。
截至今年3月底iPhone在中国的用户基数为20.9%，正在缩小与华为的领先优势，而苹果增长的趋势将一直持续到今年上半年（3月份iPhone在中国的出货量14个百分点，仅同比下滑6%，要知道今年2月份，iPhone在中国的出货量暴降了20%，是6年来最低水平。）。
为何销量突然提升？并非偶然
对于苹果来说，iPhone销量在中国市场突然提升并非偶然，因为从根本上来说，他们用降价刺激了消费者。3月份，苹果完成了对iPhone
XS和iPhone XS
Max的降价，当然这个操作依然是通过第三方渠道来完成，这样可以把对品牌的伤害降低到最小。
</div> <!-- 操作区 -->
<div id="opts" class="opts">
<button id="btn" class="btn">更多</button>
</div> <!-- 脚本 -->
<script>
document.getElementById("btn").addEventListener(
"click",
e => {
// 展开内容区
let box = document.getElementById("box");
box.classList.remove("partial"); // 移除操作区
let opts = document.getElementById("opts");
document.body.removeChild(opts);
},
false
);
</script>
</body>
</html>