ホームページ > 記事 > ウェブフロントエンド > 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);}
放射状グラデーション
##放射状グラデーションは中心によって定義されます。グラデーションの中心、形状 (円または楕円)、およびサイズを指定することもできます。デフォルトでは、グラデーションの中心が中心になります。ポイント)、グラデーションの形状は楕円 (楕円を表す)、グラデーションのサイズは Farthest-corner (最も遠いコーナーを表す) です。
中央放射状グラデーション
div{ width:500px; height:100px; background-color: #2F2727; background-position: center center; background-repeat: no-repeat; background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); }
##カスタム放射状グラデーション
closest-side: 最近接コーナー: 最近接コーナー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 サイトの他の関連記事を参照してください。