如何仅通过background属性调整多radial-gradient的渐变方向？

嘿，我明白你的困扰——多层径向渐变的方向调整确实不像线性渐变那样直接加角度就行，不过咱们只需要调整渐变的圆心位置和背景的尺寸、定位就能搞定！

先看修改后的代码，直接替换你原来的background属性就行：

div {
 width: 400px;
 height: 400px;
 background: 
   radial-gradient(circle at 50% 100%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent),
   radial-gradient(circle at 50% 0%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) -50px 0;
 background-size: 100px 75px;
}

关键调整点解释： #

• 渐变圆心位置：原来的circle at 100% 50%（右侧水平中点）和circle at 0% 50%（左侧水平中点），改成了circle at 50% 100%（底部垂直中点）和circle at 50% 0%（顶部垂直中点），这样波浪的凸起方向就从垂直变成了水平。
• 背景尺寸交换：把原来的75px 100px换成100px 75px，让背景块的宽高适配水平方向的重复逻辑。
• 背景定位调整：把0 -50px改成-50px 0，让上下两个渐变块在水平方向上正确拼接，形成连续的波浪效果。

这样修改后，你的<div>就会呈现出从左到右延伸的红色波浪纹理啦～

内容的提问来源于stack exchange，提问作者Kacper G.