css background:attachment实现滚动出现分隔阴影

background-attachment: srcoll;	背景不随滚动变化
background-attachment: local;	背景随容器滚动变化

通过背景渐变色:实现不滚动时的背景色和滚动时的阴影渐变色

滚动出现阴影:
	未滚动时,不滚动的渐变色覆盖在阴影渐变色上,设置成background-attachment:local;使得滚动时背景色往上移,展现阴影
	阴影渐变色设置成background-attachment: srcoll;

原理图:

代码示例:

// 情形一：
.g-one {
    
    
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}

// 情形二：
.g-two {
    
    
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

// 情形三：
.g-combine {
    
    
    background: 
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

代码示例:

.g-table {
    
    
    margin: 50px auto;
    width: 450px;
}

table {
    
    
    position: relative;
    width: 450px;
    border: 1px solid #ccc;
    text-align: center;
    
    tbody {
    
    
        border-collapse: separate;
        height: 200px;
    }
    
    td, th {
    
    
        width: 150px;
        padding: 5px;
        border: 1px solid #ccc;
    }
}

.g-scroll {
    
    
    top: -1px;
    position: relative;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: 
        linear-gradient(#fff, transparent) top / 100% 100px,
        radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}


<div class="g-table">
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>姓名</th>
                <th>地址</th>
            </tr>    
        </thead>
    </table>
    <div class="g-scroll">
        <table>
            <tbody>
                <tr>
                    <td>2021-01-01</td>
                    <td>XXXXX</td>
                    <td>DDDDD</td>
                </tr>    
            </tbody>
        </table>
    </div>
</div>