コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3での色の線形グラデーションカラーの実装コード

CSS3での色の線形グラデーションカラーの実装コード

不言
リリース： 2018-08-20 11:48:05
オリジナル
2200 人が閲覧しました

この記事の内容はCSS3での線形グラデーションカラーの実装コードです。必要な方は参考にしていただければ幸いです。

css3 グラデーションは線形グラデーション(linear)と放射状グラデーション(radial)に分かれます。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 この構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。

線形グラデーション構文: 

linear-gradient(to bottom,#FFF,#999)
ログイン後にコピー

パラメーター: 最初のパラメーターは、角度または英語で表現できるグラデーションの方向を指定します:
CSS3での色の線形グラデーションカラーの実装コード

2 番目と 3 番目のパラメーターは、色の開始点と終了点を表します。は複数の色の値です

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
ログイン後にコピー

サンプルコード: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Gradient</title>
 <style type="text/css">
 p {
   width: 400px;  
   height: 150px;  
   line-height: 150px;  
   text-align:center;  
   color: #000;  
   font-size:24px;  
   background-image:linear-gradient(to top left,yellow,blue);
   }
 </style>
 </head>
  <body>　　<p>右下角向左上角的线性渐变背景</p>
  </body>
  </html>
ログイン後にコピー

効果は次のとおりです:

CSS3での色の線形グラデーションカラーの実装コード

関連する推奨事項:

【CSS3】-Color RGBA and gradient_html/css_WEB-ITnose

CSS 3カラー線形グラデーションの練習_html/css_WEB-ITnose

以上がCSS3での色の線形グラデーションカラーの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
CSS3中颜色渐变色彩
ソース：php.cn
前の記事：CSS3でbackground-orginを使用する方法（コード付き） 次の記事：CSSでのトランジションのプロパティと実装方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
フォーカスが機能しないときに非表示を表示からブロックを表示に変更する 「searchbarinput」をクリックしたときに「searchbardropdown」を表示させようとしていますが、うまくいきません。何が起こっているのか知っている人はいますか...
から 2024-04-04 14:24:47
0
1
371
Ag-Grid: 行のデータに基づいてではなく、タイマーに基づいて行のスタイルを設定することは可能ですか? しばらくしてから行の背景色を変更する必要があります。グリッドに秒単位の時間を示す列があり、その時間が 50% 経過した後に行の色を変更する必要があります。グリッド自体のデータは変更...
から 2024-04-03 20:14:05
0
1
360
マウスが要素上で停止したかどうかを確認するにはどうすればよいでしょうか? JavaScriptまたはCSSを使用して要素の上にマウスを置くのを止める方法を知りたいです。マウスを要素の上に置くと背景の色が変わるアニメーションを作成しています。また、要素の上...
から 2024-03-31 13:28:28
0
1
272
考えられる問題: 'background-color' を 'DT' とともに使用すると予期しない結果が発生する バージョン v0.26 以降、Rshiny で使用される DT パッケージの背景色が変更されました。これはあなたと私にとって同じ問題ですか？背景色の変更が効かなくなったのはバグでし...
から 2024-03-30 09:30:22
0
1
395
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート