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
}
核心思路
- 取消table边框
- 使用伪元素模拟边框
linear-gradient
实现渐变色pointer-events none
实现事件穿透,可使模糊毛边可被点击,以穿透事件