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 グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

Dockerコンテナでアプリケーションサービスを自動的に起動する方法の例

コンテナの起動時に Docker コンテナ内のアプリケーション サービスを自動的に起動する場合。 D...

MySQL のダウンロードとインストールの詳細グラフィックチュートリアル

1. MySQLデータベースをダウンロードするには、公式Webサイトにアクセスしてください:http...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

Node+Express テストサーバーのパフォーマンス

目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...

非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

要素の属性を削除する JS removeAttribute() メソッド

JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...

海外でダウンロードできる25個の新鮮で便利なアイコンセット

1. Eコマースアイコン2. アイコンスイーツ2 3. 携帯電話アイコンパック4. 旗アイコンセット...

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...