CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)-CSSチュートリアル-php.cn

CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)

坏嘻嘻

リリース： 2019-12-30 09:51:27

オリジナル

30572 人が閲覧しました

現在の Web 開発プロセスでは、人間とコンピューターのインタラクションとユーザーエクスペリエンスにより多くの注意が払われており、それは Web ページの色の多様化に最も直感的に反映されています。この記事の内容は、CSS3 を使用してカラーの線形グラデーション属性を実現する方法についてです。必要な方は参考にしていただければ幸いです。

マニュアルの推奨事項: css 学習マニュアル

線形グラデーションを実現するための css3 の使用の概要

css3 では、線形グラデーションと放射状グラデーションの 2 種類のグラデーションが定義されています。線形グラデーションは、2 つ以上の色の間で滑らかな遷移を示すアニメーション効果を指します。この効果を実現するには、通常、グラデーションの方向に従って上から下、右に分割します。左および斜め方向。デフォルトの方向は上から下です。

css3 を使用して線形グラデーションを実装する原理

css3 で 2 つのカラーノードを定義する必要があります。これらの 2 つの色は、色のスムーズな遷移のために、1 つのカラーノードが開始点となり、もう 1 つのカラーノードが終了点になります。背景の使用方法を説明するために div 背景を例に挙げます。 ); 構文。

#css3 を使用して線形グラデーションを実装するコード

タイプ 1: グラデーションの方向は上から下です

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
 div {
    width: 400px;
     height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -mos-linear-gradient(red,blue);
background: linear-gradient(red,blue);
 }
</style>
  </head>
  <body>
    <div></div>
  </body>
</html>

ログイン後にコピー

#効果を実現

CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています) タイプ 2: グラデーションの方向は右から左のグラデーションです

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
 div {
     width: 400px;
       height: 200px;
background: -webkit-linear-gradient(right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: -moz-linear-gradient(right,red,blue);
background: -mos-linear-gradient(right,red,blue);
background: linear-gradient(right,red,blue);
 }
</style>
  </head>
  <body> 
    <div></div>
  </body>
</html>

ログイン後にコピー

効果を実現する

##タイプ 3: グラデーションの方向は右下隅から左上です。コーナー CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
 div {
   width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -mos-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
 }
</style>
  </head>
  <body> 
    <div></div>
  </body>
</html>

ログイン後にコピー

結果を出す

## おすすめ関連記事:

CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています) 1.