CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文

デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。
IE9 より前では、グラデーションはすべてフィルターを通じて実装されており、一般的な書き方は次のとおりでした。

.testDiv {
		幅:400ピクセル;
		高さ:400px;
		境界線:1px実線 #f00;
		/*
		IE フィルターの書き方
		gradientType : 1 は水平方向を表し、0 は垂直方向の線形グラデーションを表します。
		startColorstr は開始色、endColorstr は終了色です。
		色は16進数表記または英語の単語に対応しています。もちろん透明度もサポートされています[16進数]

		#AAFF0000 [AA は透明度 (00 は完全に透明、FF は完全に不透明)]、最後の 6 桁は標準の 16 進数の色の表記です。
		 */
		
		/*IE6〜7*/

	    フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    /*IE8*/
	    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    

	}

効果は次のようになります：水平グラデーションと明るい色、透明が設定されます

ここに写真の説明を記入してください

この記事では主にCSS3でのグラデーション効果のネイティブ実装を紹介します!!!【主流のブラウザとモバイルブラウザは任意に使用できます】

CSS3 線形グラデーションの互換性

ここに写真の説明を記入してください

標準構文（2 つのパラメータが含まれ、最初のパラメータは角度または英語の方向、2 番目はグラデーションの開始で、複数の色の値が許可されます）

グラデーション: ([方向または角度]、開始値の色)
firefox/chrome/ms/operaの表記が標準化され、以前のバージョンにはプレフィックスを付ける必要がある。
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [4 つのプレフィックスは 4 つの解析エンジンに対応しています。過去のブラウザを表すためにこのように書きました。たとえば、Opera は現在 Google の Blink エンジンを使用しています。]

###勾配角度 (deg は degree の略で、角度を意味します)

下から上へ: 上へ = 0deg || 360deg
上から下へ: 上下 = 180 度 || -180 度
左から右へ: 左上 = -90 度 || 270 度
右から左へ: 右へ = 90度 || -270度
右下から左上へ: 左上へ = 315 度 || -45 度
左下から右上へ: 右上へ = -315 度 || 45 度
右上から左下へ: 左下へ = 225 度 || -135 度
左上から右下へ: 右下へ = 135 度 || -225 度
ヒント: 標準化のために角度を使用することをお勧めします。一部の Safari では、英語方向では他のブラウザとは解析が異なる場合があります。

レンダリング

ここに写真の説明を記入してください

コード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <スタイル タイプ="text/css" メディア="screen">
    div {
        幅: 200ピクセル;
        高さ: 200px;
        境界線: 1px 実線 #ccc;
        ボックスのサイズ: 境界線ボックス;
        テキスト配置: 中央;
        行の高さ: 200px;
        フロート: 左;
        マージン: 10px;
    }
    /*
			ここでのクラス名は略語です:
			u :上、
			d: 下、
			l:左、
			そうです、
			b:下、
			2: に;
			正の角度は時計回り、負の角度は反時計回りです。角度は、特定の角度に到達して他の範囲に広がり始める時点を表します。
			私も最初は戸惑いましたが、書いていくうちにわかってきました。
			この記事を書いた時点では、勾配標準仕様はより完全になっており、その多くはプレフィックスを必要としません。
			モバイル端末を考慮すると、Webkitは捨てられない*/
    
    .u2d {
        背景: -webkit-linear-gradient(180deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(180度, #590BCC, #18CC6C);
    }
    
    .d2u {
        背景: -webkit-linear-gradient(0deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(0度, #590BCC, #18CC6C);
    }
    
    .l2r {
        背景: -webkit-linear-gradient(90deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(90度, #590BCC, #18CC6C);
    }
    
    .r2l {
        背景: -webkit-linear-gradient(-90deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(-90度, #590BCC, #18CC6C);
    }
    
    .rb2lu {
        背景: -webkit-linear-gradient(-45deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(-45度, #590BCC, #18CC6C);
    }
    
    .lb2ru {
        背景: -webkit-linear-gradient(45度, #590BCC, #18CC6C);
        背景: 線形グラデーション(45度, #590BCC, #18CC6C);
    }
    
    .ru2lb {
        背景: -webkit-linear-gradient(-135deg, #590BCC, #18CC6C);
        背景: 線形グラデーション(-135度, #590BCC, #18CC6C);
    }
    
    .lu2rd {
        背景: -webkit-linear-gradient(135度, #590BCC, #18CC6C);
        背景: 線形グラデーション(135度, #590BCC, #18CC6C);
    }
    
    .mclg1 {
        背景: -webkit-linear-gradient(135deg, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
        背景: 線形グラデーション(135度, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
    }
    
    .mclg2 {
        背景: -webkit-linear-gradient(135deg, #1FB4DC,#18CC6C, #8B1A1A,#677C67,#BED128);
        背景: 線形グラデーション(135度, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
    }
    
    .mclg3 {
        背景: webkit-linear-gradient(135deg, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
        背景: 線形グラデーション(135度, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
    }
    
    .mclg4 {
        背景: -webkit-linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
        背景: linear-gradient(-135deg, rgba(20,20,20,.9),rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
    }
    </スタイル>
</head>

<本文>
    <div class="u2d">トップダウン</div>
    <div class="d2u">ボトムアップ</div>
    <div class="l2r">左から右へ</div>
    <div class="r2l">右から左へ</div>
    <div class="rb2lu">右下隅から左上隅まで</div>
    <div class="lb2ru">左下から右上へ</div>
    <div class="ru2lb">右上隅から左下隅</div>
    <div class="lu2rd">左上隅から右下隅</div>
    <div class="mclg1">4 つのカラー グラデーション</div>
    <div class="mclg2">5 つのカラーグラデーション</div>
    <div class="mclg3">6 色のグラデーション</div>
    <div class="mclg4">透明なグラデーションのカラー</div>
</本文>

</html>

要約する

CSS3 の登場により、線形グラデーションを実現するために PS だけに頼る必要がなくなりました...フロントエンドパートナーも、あらゆる種類のクールなグラデーション効果を独自に作成できるようになりました!!! ハハハハハ~~~

CSS3 で線形グラデーションを実装する方法の詳細なサンプルコードに関するこの記事はこれで終わりです。CSS3 線形グラデーションの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: JavaScript 組み込みオブジェクトの概要

>>: DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します