CSS3 のグラデーション属性を使用して背景のグラデーション効果を作成する方法

この記事では、CSS3 の背景グラデーションの効果について共有します。これは一定の参考値となるため、皆様のお役に立てれば幸いです。

背景グラデーションは優れたものです。特殊効果、それでは CSS3 を使用してこの効果を実現する方法について今日は説明します。 CSS3 グラデーションは、画像モジュールに追加される新しいタイプの画像です。 CSS3 グラデーションを使用すると、2 つ以上の指定した色の間で滑らかな遷移を表示できます。

ブラウザは 2 種類のグラデーションをサポートしています:

linear、linear-gradient() 関数で定義、

radial、radial- で定義gradient () 関数の定義。

使用中はブラウザの互換性の問題に注意してください

Safari、Chrome:-webkit-linear-gradient

Firefox:-moz- Linear-gradient

IE:-ms-linear-gradient

Opera:-o-linear-gradient

この記事の内容は次のとおりです。 Chrome ブラウザを例にして説明します。

線形グラデーション

線形グラデーションを作成するには、開始点と方向を次のように設定します。また、カラーストップを定義するには、少なくとも 2 つのストップカラーを指定する必要があります。

上から下への線形グラデーション

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

左から右へのグラデーション プロセス

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

##線形グラデーション (一時停止も含む)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

放射状グラデーション

中央放射状グラデーション

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

##カスタム放射状グラデーション

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

概要: 上記は次のとおりですこの記事のすべての内容が、皆さんのグラデーションの学習に役立つことを願っています。

以上がCSS3 のグラデーション属性を使用して背景のグラデーション効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。