あなたのウェブページ上の要素に追加された柔らかい外側の光が、要素を見る者に目立つようにします。 CSS3とHTMLを使用して、重要なオブジェクトの外側の端にグローを適用します。このエフェクトは、Photoshopのオブジェクトに追加された外側のグローと似ています。
最初に要素を作成してグローを作成する
グローの効果はどの色の背景でも行うことができますが、暗い背景で最もよく見えます。その理由は、グローがもっと光り輝くように見えるからです。この丸い角の四角いボックスの例では、DIV要素は黒の背景を持つ別のDIV要素に配置されます。外側のDIVはグローでは必要ありませんが、白い背景でグローを見るのは難しいです。
DIVに輝きのクラスを与える：
要素のサイズと色を設定する
グローを使用して装飾する要素を選択した後、背景色、サイズ、フォントなど、必要なスタイルを追加してください。この例は青い矩形です。サイズは、147px x 90pxに設定されています。背景色はロイヤルブルーの＃1f5afeに設定されます。これは、黒いコンテナ要素の中央に要素を配置するマージンを含みます。
コーナーを丸める
角が丸く四角形を作成するのはCSS3で簡単です。 Glowクラスにborder-radiusスタイルプロパティを追加します。最高の互換性のために-webkit-と-moz-接頭辞を使用してください。
-webkit-border-radius：15px;-moz-border-radius：15px;ボーダー半径：15px; グローをボックスシャドウで追加する
グロー自体は、ボックスの影で作成されます。要素全体をハローし、シャドウのように片面から光を投影しないために、水平と垂直の長さを0pxに設定します。この例では、ぼかし半径が15pxに設定され、ぼかしの広がりは5pxですが、これらの設定を使ってどの程度幅広く拡散しているかを判断することができます。色rgb（255,255,190）は、RGBaアルファ透明度が75％-rgba（255,255,190、.75）に設定された黄色です。プロジェクトに最適なグローカラーを選択してください。コーナーを四捨五入する場合と同様に、最良の互換性のために、ブラウザプレフィックス（-webkit-と-moz-）を使用することを忘れないでください。
-webkit-box-shadow：0px 0px 15px 5px rgba（255、255、190、.75）;-moz-box-shadow：0px 0px 15px 5px rgba（255、255、190、.75）;ボックスシャドウ：0px 0px 15px 5px rgba（255,255,190、.75）; グローボックスのテスト
1つまたは複数のブラウザでグローボックスをテストし、ウェブページに最適なグロー効果を与えるために必要な調整を行います。
