ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3での色の線形グラデーションカラーの実装コード

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

不言
不言オリジナル
2018-08-20 11:48:052184ブラウズ

この記事の内容は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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。