相信大家對列表展示早已不陌生了，工作中也經常會有這樣的需求。那我們如何實現一個既簡單又美觀的列表展示呢？

首先讓我們來看一下效果：

上面是普通的展示列表，而下面則是我們處理過的展示列表，是不是感覺美觀了很多啊。

實現：

　　核心屬性： linear-gradient（線性漸變）

　　思路：絕對定位一個盒子到圖片的上方，並對盒子的背景使用 linear-gradient漸變。

下面我們來看看具體的實現程式碼(可複製的程式碼依舊在文章最下方)

APP.js檔案

 APP.css

APP.js

import React, {Component} from 'react'
import './App.css'
class App extends Component{
  render() {
    return (
      <ul className='mylist'>
        <li>
          <img src="https://s2.ax1x.com/2019/12/23/l9GN7t.jpg" alt=""/>
          <div className='li-content'>
            我是列表項
          </div>
        </li>
        <li>
          <div className='mongolia'></div>
          <img src="https://s2.ax1x.com/2019/12/23/l9Gm01.jpg" alt=""/>
          <div className='li-content'>
            我是列表項
          </div>
        </li>
      </ul>
    );
  }
}
export default App

APP.css

.mylist{
  padding-top: 200px;
  padding-left: 300px;
  background-color: #EEE;
  height: 500px;
}
.mylist>li{
  position: relative;
  margin-top: 20px;
  width: 600px;
  height: 80px;
  background-color: #fff;
  display: flex;
}
.mylist>li>img{
  width: 200px;
  height: 80px;
}
.mylist>li>.li-content{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mylist>li>.mongolia{
  position: absolute;
  width: 200px;
  height: 80px;
  background-image: linear-gradient(to right, rgb(255,255,255,0), #ffffff);
}