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

我有一个带有径向渐变点图案背景的盒子。当我使用属性

padding bottom:100%

将其设置为正方形时，点模式的效果与预期一样。当切换到移动设备时，我需要将此框设置为矩形，因此我将底部填充改为45%。45%时，点图案不可见，如果填充底部小于75%，则点图案将根本不显示。为什么呢？怎样才能达到预期的效果。理想情况下，该图案适用于任何尺寸的盒子

下面是一个JSFIDLE，它显示了问题>。红色方形框有点图案，而矩形紫色框没有点

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

这是一张我正在描述的图片：

---

我想到了一个解决方法，创建一个方形的psuedo元素（：：before）并将重复的径向背景应用于该元素，然后将

溢出：隐藏

添加到矩形类中。我希望这对你有帮助

注意：确保

：：before

元素的宽度和高度大于主元素

.box{
背景：蓝色重复径向梯度（红色，红色2px，透明2px，透明100%）；
背景尺寸：4px；
垫底：100%；
位置：相对位置；
}
.盒子：之后{
框阴影：插入0 0 90px 40px rgba（0,0,0,75）；
内容：''；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.集装箱{
宽度：610px；
身高：385px；
显示：内联块；
利润率：20px；
}
.矩形{
垫底：45%；
位置：相对位置；
溢出：隐藏；
}
.矩形：之前{
内容：''；
左：0；
位置：绝对位置；
排名：0；
宽度：1000px；
高度：1000px；
背景：绿色重复径向梯度（紫色，紫色2px，透明2px，透明100%）；
背景尺寸：4px；
z指数：0；
}  
.矩形：之后{
框阴影：插入0 0 90px 40px rgba（0,0,0,75）；
内容：''；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
z指数：1；
}

---

Kiran，这太完美了。你才是真正的MVPThanks用户2827811:）。很高兴我能帮忙。快乐编码。