使用css中的mask特性为html元素添加渐变透明边缘

木头的喵喵拖孩
  2024-05-09 14:18:42 2024-05-09 14:18 创建   2024-08-02 11:23:31 2024-08-02 11:23 更新    

上代码！

git 地址
npm 地址

代码

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渐变透明边框</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        padding: 25vh 25vw;
        background-image: conic-gradient(
          red 6deg,
          orange 6deg 18deg,
          yellow 18deg 45deg,
          green 45deg 110deg,
          blue 110deg 200deg,
          purple 200deg
        );
      }

      /* 第一层，主要解决左右的渐变透明边缘 */
      .left-right {
        width: 50vw;
        height: 50vh;
        mask: linear-gradient(
          to right,
          transparent 0%,
          white 15%,
          white 85%,
          transparent 100%
        );
      }

      /* 第二层，主要解决上下的渐变透明边缘 */
      .top-bottom {
        width: 50vw;
        height: 50vh;
        mask: linear-gradient(
          to bottom,
          transparent 0%,
          white 15%,
          white 85%,
          transparent 100%
        );
      }

      .content {
        width: 100%;
        height: 100%;
        background-color: black;
        color: white;
      }
    </style>
  </head>

  <body>
    <!-- 第一层，主要解决左右的渐变透明边缘 -->
    <div class="left-right">
      <!-- 第二层，主要解决上下的渐变透明边缘 -->
      <div class="top-bottom">
        <!-- 主体内容，可以很复杂，边缘都会渐变透明化 -->
        <div class="content">
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
          又一热点城市，房地产政策出现重大变动！
          5月9日，杭州市住房保障和房产管理局官网发布《关于优化调整房地产市场调控政策的通知》（简称《通知》），宣布全面取消住房限购。
          中新财经梳理发现，目前全国仍保留住房限购的省份或城市，除了北京、上海、广州、深圳四个一线城市，仅剩海南省、天津市、西安市仍处于部分放开限购的状态。
        </div>
      </div>
    </div>
  </body>
</html>
  • 标题: 使用css中的mask特性为html元素添加渐变透明边缘
  • 作者: 木头的喵喵拖孩
  • 创建于: 2024-05-09 14:18:42
  • 更新于: 2024-08-02 11:23:31
  • 链接: https://blog.xx-xx.top/2024/05/09/使用css中的mask特性为html元素添加渐变透明边缘/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
此页目录
使用css中的mask特性为html元素添加渐变透明边缘
  1. 代码