2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] radial-gradient()関数で円形のグラデーションを表示しよう!

radial-gradient()関数の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.radial-gradient()関数とは?

radial-gradient()関数は画像のデータ型で値を指定できるプロパティにおいて、円形のグラデーションを表します。

関数の引数は半角スペースとカンマで区切って指定します。

引数の指定方法は以下の通りです。

{ プロパティ: radial-gradient(引数); }

引数の指定方法

  • circle
  • ellipse
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
  • 任意の数値+単位
  • %値
  • at top
  • at top right
  • at right
  • at bottom right
  • at bottom
  • at bottom left
  • at left
  • at top left
  • at center




2.radial-gradient()関数の使い方

それではradial-gradient()関数の使い方をみていきましょう。

.sample {
 background: radial-gradient( red, yellow );
}

上記の例では、中心が赤色、角が黄色になり、その間をグラデーションしています。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です