我想制作一个类似渐变的效果，围绕我的网站边缘，从纯色开始，然后向中心变得更加透明，但我需要它是特定的视图高度和宽度（10vh 10vw），所以它矩形，具有特定的效果距离并可通过调整大小进行调整
我尝试过使用阴影框和渐变，并尝试使用居中的 div 并使效果位于其外部，但如果这有意义的话，我无法“反转”它
您可以将 CSS 渐变与伪元素结合使用来生成围绕网页边界的渐变。
/ No Javascript /body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.content {
position: relative;
z-index: 2;
background-color: #ffffff;
height: 100%;
width: 100%;
}
body::before, body::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
pointer-events: none;
}
body::before {
background: radial-gradient(
circle at center,
transparent,
rgba(0, 0, 0, 0.5)
);
opacity: 1;
}
body::after {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.5),
transparent
),
linear-gradient(
to right,
rgba(0, 0, 0, 0.5),
transparent
),
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
transparent
),
linear-gradient(
to left,
rgba(0, 0, 0, 0.5),
transparent
);
background-repeat: no-repeat;
background-size: 10vh 100%, 100% 10vw, 10vh 100%, 100% 10vw;
background-position: top, right, bottom, left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient Border Effect</title>
</head>
<body>
<div class="content">
<!-- Your content will be here -->
<h1>Hello World!</h1>
</div>
<div class="gradient-border"></div>
</body>
</html>这可能有用。