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

Question

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

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

非常感谢任何见解或建议。

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

Answer 1

我想到了创建一个正方形伪元素（：之前的）的解决方法，并将重复的径向背景应用于此并将overflow: hidden添加到矩形类。我希望这对你有帮助。

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

＆＃13;

＆＃13;

  .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;
  }

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;