CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法

背景: linear-gradient(direction,color-stop1,color-stop2,...);
  • direction : 角度値を使用してグラデーションの方向 (または角度) を指定します。
  • color-stop1,color-stop2,... : グラデーションの開始色と終了色を指定するために使用されます。

注意: 少なくとも 2 色が必要です。

最初のもの

背景: 線形グラデーション(左へ、#d3959b、#bfe6ba);

to left は右からto leftグラデーションを設定します。これは270degに相当します。

ここに画像の説明を挿入

2番目

背景: 線形グラデーション(右へ、#d3959b、#bfe6ba);

to right左から右へのグラデーション、つまり90degに設定します。

ここに画像の説明を挿入

3番目

背景: linear-gradient(上へ、#d3959b、#bfe6ba);

to top下から上へのグラデーションを設定します。これは0degに相当します。

ここに画像の説明を挿入

4番目

背景: linear-gradient(下へ、#d3959b、#bfe6ba); 

ここに画像の説明を挿入

5番目

背景: 線形グラデーション(右上、#d3959b、#bfe6ba);

右上へto right top = to top right 、対角の角度

ここに画像の説明を挿入

第六

背景: 線形グラデーション(45度,#d3959b,#bfe6ba);

to top rightと「右上へ」には若干の違いがあります(背景が正方形の場合は違いはありません)。

ここに画像の説明を挿入

7番目

背景: 線形グラデーション(45度,#d3959b 20%,#bfe6ba);

開始色の位置をパーセンテージで指定します。デフォルト値は0%です。

ここに画像の説明を挿入

8番目

背景: linear-gradient(右へ、#feac5e、#c779d0、#4bc0c8); 

ここに画像の説明を挿入
ここに画像の説明を挿入

第九

背景: 線形グラデーション(45度,#feac5e,#c779d0,#4bc0c8); 

ここに画像の説明を挿入

10番目

背景: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5)); 

ここに画像の説明を挿入

rgbaでは不透明度0.5が使用されます。

ここに画像の説明を挿入

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient()) に関するこの記事はこれで終わりです。CSS コンテナ背景色グラデーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL 分離レベルの詳細な説明と例

>>:  ウェブデザインを改善するための 8 つの CSS ツールを共有する

推薦する

CSS3で作成した画像スクロール効果

成果を達成する実装コードhtml <base href="https://s3-us...

UCenter ホームサイトに統計コードを追加

UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

CentOS 7 に mysql5.7 の解凍バージョンをインストールするチュートリアル

1. mysqlの圧縮パッケージを/usr/localフォルダに解凍し、名前をmysqlに変更します...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

Windows で Mysql を起動したときに 1067 が表示される場合の解決策

数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...

MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...

CentOS で MySQL を完全にアンインストールする方法

この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...

WindowsでiTunesのバックアップパスを変更する方法

0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...

一般的なブラウザのユーザーエージェントの概要

1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...

ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...

Nodejs プラグインと使用方法の概要

このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....