能否实现带噪点的方形渐变？求高效可扩展的CSS方案

你当前的方案依赖四个独立元素和硬编码的定位/尺寸值，确实难以适配不同尺寸。以下是更简洁、可扩展的实现方式，仅需单个容器元素即可完成效果，通过CSS变量实现自适应：

核心优化点 #

• 用单个元素承载四边渐变与噪点背景，减少DOM节点
• 基于CSS变量统一控制所有尺寸，修改变量即可快速适配不同大小的方形
• 无需旋转元素，通过background-position直接定位四边渐变

完整代码示例 #

HTML #

<section>
  <div class="noise-frame"></div>
  <div class="circle"></div>
</section>

CSS #

:root {
  --frame-size: 600px;        /* 外层方形尺寸 */
  --inner-circle-size: 200px; /* 中间圆形尺寸 */
  --gradient-length: 170px;   /* 渐变的长度 */
  --gradient-offset: 20px;    /* 渐变超出圆形的宽度 */
}

section {
  position: relative;
  width: var(--frame-size);
  height: var(--frame-size);
  display: flex;
  justify-content: center;
  align-items: center;
}

.noise-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 多层背景：四边渐变 + 噪点 */
  background: 
    /* 顶部渐变 */
    linear-gradient(to bottom, rebeccapurple, transparent)
    top center / calc(var(--inner-circle-size) + var(--gradient-offset)) var(--gradient-length),
    /* 底部渐变 */
    linear-gradient(to top, rebeccapurple, transparent)
    bottom center / calc(var(--inner-circle-size) + var(--gradient-offset)) var(--gradient-length),
    /* 左侧渐变 */
    linear-gradient(to right, rebeccapurple, transparent)
    left center / var(--gradient-length) calc(var(--inner-circle-size) + var(--gradient-offset)),
    /* 右侧渐变 */
    linear-gradient(to left, rebeccapurple, transparent)
    right center / var(--gradient-length) calc(var(--inner-circle-size) + var(--gradient-offset)),
    /* 噪点背景（使用100x100 viewBox实现自适应缩放） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.58' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
  background-repeat: no-repeat;
  filter: contrast(145%) brightness(650%);
}

.circle {
  width: var(--inner-circle-size);
  height: var(--inner-circle-size);
  background-color: white;
  position: relative;
  z-index: 2;
}

使用说明 #

• 修改:root中的CSS变量即可快速调整整体尺寸：比如将--frame-size改成400px，--inner-circle-size改成150px，所有渐变会自动适配
• 噪点SVG的viewBox设为100x100，可跟随容器自动缩放，无需固定尺寸

内容的提问来源于stack exchange，提问作者conor.v