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をインストールする

推薦する

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

Zabbix と bat スクリプトを組み合わせて複数のアプリケーションの状態を監視する方法

シナリオシミュレーション:国内企業の中には、重要な業務をサポートするために特定のウィンドウ プログラ...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...

MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...

Alibaba Cloud CentOS 7 に yum を使用して MySQL をインストールする正しい方法 (推奨)

yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

MySql で正規表現クエリを使用する方法

正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...

CSSを使用してTDのINPUTの幅を設定する

最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

フォームデータを取得するための Node.js メソッドの 3 つの例

序文Nodejs はサーバーサイド言語です。開発中、登録やログインなどでは、判断のためにフォームを通...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...