css - 径向渐变背景图案

Question

我正在尝试使用纯 CSS3 实现以下效果。我认为 repeating-radial-gradient 是正确的路径，但我不知道如何让径向渐变水平“从大到小”。有什么建议吗？

这是我得到的最接近的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;
}

Answer 1

更接近您要查找的内容:

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