CSS グラデーション効果の概要 (線形グラデーションと放射状グラデーション)

CSS グラデーション効果の概要 (線形グラデーションと放射状グラデーション)

線形グラデーション

背景画像: 
linear-gradient(方向、開始色、中間色1、中間色2、...、終了色);

4方向の組み合わせ - 8方向
上、右、下、左

角度
90度

放射状グラデーション

背景画像: 
放射状グラデーション(方向の図形のサイズ、開始色、中間色1、中間色2、...、終了色);

サイズ: 円の半径の値、または楕円の長半径と短半径の 2 つの値をパーセンテージ/ピクセルで指定します。


楕円

方向 パーセント/ピクセル

最も近い側/最も近い角/最も遠い側/最も遠い角

背景画像: 放射状グラデーション(800px の円、50% 50%、#2CD8D5 0%、#C5C1FF 56%、#FFBAC3 100%); 

要約する

CSS グラデーション効果(線形グラデーションと放射状グラデーション)の概要については以上です。CSS グラデーション効果に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JavaScript を使って簡単な計算機を書く

>>:  LinuxにKafkaをインストールする

推薦する

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

ユニアプリとミニプログラム(画像とテキスト)を下請けする方法を教えます

目次1. ミニプログラム下請け2. Uniapp 下請けアプレット下請けの手順: 1. manife...

Linux で cmake を使用して MySQL をコンパイルおよびインストールするための詳細なチュートリアル

1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...

Vue のローカルコンポーネントの紹介

Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...

MySQL データベース アーキテクチャの詳細

目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...

HTML テーブル タグ チュートリアル (34): 行スパン属性 ROWSPAN

複雑なテーブル構造では、一部のセルが水平方向に複数のセルにまたがるため、行間属性 ROWSPAN を...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...

docker で Apollo をデプロイする詳細なチュートリアル

1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...

HTML(CSSスタイル仕様)を読む必要があります

CSS スタイル仕様1. クラスセレクター2. タグセレクター3. IDセレクター4. CSSスタイ...

Javascript における非同期待機の詳細な理解

この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...

HTMLとXHTML、HTML4とHTML5のタグの違いについて簡単に紹介します。

HTML と XHTML の違い1. XHTML要素は正しくネストされている必要がある2. XHT...