css设置让整个盒子的内容渐变透明（非颜色渐变透明）
效果
核心css代码
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
mask-composite: intersect;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.f-c-c {display: flex;justify-content: center;align-items: center;}.content {width: 100vw;height: 100vh;}.skyblue {width: 500px;height: 500px;background-color: skyblue;mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);mask-composite: intersect;}.pink {width: 200px;height: 200px;background-color: pink;}.pink {width: 200px;height: 200px;background-color: pink;mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%),linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);mask-composite: intersect;}.yellow {width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div class="content f-c-c"><div class="skyblue f-c-c"><div class="pink"><div class="yellow"></div></div></div></div>
</body>
</html>
