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

   實作事件穿透，可使模糊毛邊可被點選，以穿透事件