你好

我在實現CSS漸變方面有問題！

我希望在調整頁面大小后保留云的原始形狀。

它必須用CSS漸變來實現 應該只使用HTML和CSS(最好) 我渴望看到你的解決方案:)

[在此輸入圖像描述](https://I . stack . imgur . com/pct 35 . jpg)

你需要長寬比保持不變。

我看了你給的圖片，當你的高度為400像素，寬度為1884像素時，這些云看起來還不錯。

這就是這段代碼使用的長寬比:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.sky {
  width: 100%;
  /*height: 400px;*/
  aspect-ratio: 1884 / 400;
  background-color: rgb(92, 217, 255);
  background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%), radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%), radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%), radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%), radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}

<div class="sky"></div>