css实现渐变色遮罩层(模糊毛边)

CSS实现模糊毛边效果

效果如图

css样式代码

.el-table>td {
    border none
}
.el-table::before {
    height 40px
    background linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1))
    pointer-events none
}

核心思路

1. 取消table边框
2. 使用伪元素模拟边框
3. linear-gradient实现渐变色
4. pointer-events none实现事件穿透，可使模糊毛边可被点击，以穿透事件