最好的方法是在background属性中列出它们。但请记住，属性的顺序非常重要。

background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

背景，然后-大小和-重复，否则它不会工作。我花了大约30分钟才拿到。希望对某人有帮助。

每一个都用逗号隔开。
就像这样：

background-image: url(),url(), url();

当然，你可以用渐变来代替url。
所有现代浏览器都支持此功能（这意味着IE不支持）。
为了使其在IE中可用，可以使用pie.htc

你只需要把它们一个接一个地列出来--就像这样：

html {
  height: 100%;
  background: 
    radial-gradient(closest-corner at 50% -10%, 
            rgba(5, 5, 5, .7), 
            transparent), 
    radial-gradient(closest-corner at 50% 110%, 
            rgba(5, 5, 5, .7), 
            transparent);
}

您必须将径向渐变的值设置为透明，以便让其他背景通过：

background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
                     radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
                     radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);