CSS3 を使用して入力入力ボックスのカラー グラデーション グロー効果を実現する方法

この記事では主に、入力ボックスの色のグラデーションのグロー効果を実現するための css3 の使用方法を紹介します。必要な友人に参考にしていただけるように共有します。

長い間、主要な主流ブラウザ、特に IE との互換性はあまり高くありませんでしたが、-moz- -webkit- のような接頭辞を追加すると、Chrome や Firefox でより良い結果が得られたり、Transition によって達成されるトランジション効果が得られます。

をクリックしてカラー グラデーション効果を実現するために、これは単純なボックス シャドウ アトリビュートだけではなく、その周囲に均一なグローのような効果も含まれています。

学習を続ける前に、CSS3 の基本的な知識を持っている必要があります。これらすべてを行うには、CSS3 の Shadow、RGBa、および Transition プロパティを理解する必要があります。そうでないと理解できません。

1. 光る境界線のテキスト ボックス効果を作成します

<input type="text" class="sdw" />

次に、この入力コンポーネントがフォーカスされる (クリックされる) と周囲が光り、青く表示されるようにします:

りー

以上です。 RGBカラーは好みに応じて変更できます。

2. すべての入力コンポーネントに境界線のグロー効果をグローバルに追加します

Web ページ内のすべてのテキスト入力ボックスにこの効果を適用したい場合は、CSS を使用してグローバルに設定するだけです。

次の文を CSS ファイルに追加します:

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS3 を使用してシンプルな 3D 半透明立方体画像を作成する方法

IE フィルターで CSS3 を使用してグラデーションとシャドウ効果を実現する方法

以上がCSS3 を使用して入力入力ボックスのカラー グラデーション グロー効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。