效果图:
div容器:
<div className={styles.container}><div className={styles.content}><div className={styles.inner}><!-- 内容部分 --></div></div>
</div>
css:
.container {float: left;width: 500px;min-height: 136px;max-height: 746px;overflow-y: auto; // 允许滚动border-radius: 10px;position: relative;border-left: 3px solid #2865D5;border-right: 3px solid #2865D5;&::before, &::after {display: block;content: "";position: sticky;left: 0;right: 0;width: 100%;height: 3px;background: linear-gradient(to right, #2865D5 0%, #4ab9f4 50%, #2865D5 100%);z-index: 2;}&::before {top: 0;}&::after {bottom: 0;}// 内容区域.content {padding: 23px 30px;.inner {min-height: calc(136px - 46px); /* 补偿padding */}}}