css - 径向渐变背景图案

我正在尝试使用纯 CSS3 实现以下效果。我认为重复径向渐变是正确的路径，但我无法弄清楚如何让径向渐变水平“从大到小”。有什么建议吗？

这是我得到的最接近的 jsfiddle 。它很接近，但它不会横向“从大到小”。

.dotted {
  padding: 2.25em 1.6875em;
    background-color: #ffb55d;
  background-image: -webkit-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  -webkit-background-size: 5px 5px;
  -moz-background-size: 3px 3px;
  background-size: 5px 5px;
}

最佳答案

更接近您正在寻找的内容:

.dotted {
    height:100px;
    width:100%;
    background: radial-gradient(orange 15%, transparent 16%) 1px 1px,
    radial-gradient(orange 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#ffb55d;
    background-size:16px 16px;
}

关于css - 径向渐变背景图案，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27623935/