为什么我的 CSS 径向渐变图案在矩形时会中断？

Question

我有一个带有径向渐变点图案背景的盒子。当我使用属性 padding-bottom: 100% 使其成为正方形时，圆点图案按预期工作。当切换到移动设备时，我需要这个盒子是一个矩形，所以我将 padding-bottom 改为 45%。在 45% 时，点图案不可见，如果底部填充小于 75%，则点图案根本不会显示。这是为什么？可以做些什么来达到预期的效果。理想情况下，该图案适用于任何尺寸的盒子。

这是一个显示问题的 jsfiddle> https://jsfiddle.net/。红色方框有圆点图案，而长方形紫色方框没有圆点。

如有任何见解或建议，我们将不胜感激。

这是一张显示我所描述内容的图片：

Answer 1

我想到了一个变通方法来创建一个正方形伪元素(::before) 并将重复的径向背景应用于该元素并将overflow: hidden 添加到矩形class。希望对您有所帮助。

注意：确保 ::before 元素的宽度和高度大于主元素。

  .box {
    background: blue repeating-radial-gradient( red, red 2px, transparent 2px, transparent 100%);
    background-size: 4px;
    padding-bottom: 100%;
    position: relative;
  }
  
  .box:after {
    box-shadow: inset 0 0 90px 40px rgba(0, 0, 0, .75);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .container {
    width: 610px;
    height: 385px;
    display: inline-block;
    margin: 20px;
    
  }
  
  .rectangle {
    padding-bottom: 45%;
    position: relative;
    overflow: hidden;
  }
  .rectangle:before {
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    width: 1000px;
    height: 1000px;
    background: green repeating-radial-gradient( purple, purple 2px, transparent 2px, transparent 100%);
    background-size: 4px;
    z-index: 0;
  }  
  .rectangle:after {
    box-shadow: inset 0 0 90px 40px rgba(0, 0, 0, .75);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }

<div class="container">
  <div class="box"></div>
</div>

<div class="container">
  <div class="rectangle"></div>
</div>

为什么我的 CSS 径向渐变图案在矩形时会中断？

Why does my CSS radial-gradient pattern break when it is a rectangle?

css

radial-gradients