css 元素溢出部分内框显示渐变

html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="overflow">
    <div class="text-scroll">
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolled
      Content to be scrolledv
    </div>
  </div>

css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.overflow {
      position: relative;
    }
    .overflow::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 240px;
      height: 25px;
      background: linear-gradient(rgba(255, 255, 255, 0.001),blue); /* 溢出部分那显示渐变 */
      pointer-events: none;
    }
    .text-scroll {
      overflow-y: scroll;
      background: #fcefef;
      width: 240px;
      height: 200px;
      padding: 15px 0;
      line-height: 1.2;
      text-align: center;
    }
css
#css
css 元素溢出部分内框显示渐变
https://github.com/chergn/chergn.github.io/7df0e6ebaec8/
作者
全易
发布于
2024年3月28日
许可协议