建立 CSS3 徑向漸變


對於徑向漸變,請設定顏色分級。預設形狀為橢圓,但您還可以設定圓形等其他形狀。在 CSS 中為徑向漸變設定至少兩個顏色分級。

以下是使用 CSS 建立徑向漸變的程式碼示例 −

示例

 線上演示

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
   height: 200px;
   width: 200px;
   background-image: radial-gradient(
      rgb(255, 0, 106),
      rgb(2, 0, 128),
      rgb(0, 255, 42)
   );
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div id="radial"></div>
</body>
</html>

輸出

上述程式碼將產生以下輸出 −

更新於:07-May-2020

104 次瀏覽

開啟 職業生涯

透過完成課程獲得認證

開始進行
廣告
© . All rights reserved.