初心者なので、it_html/css_WEB-ITnoseをクリックした後に入力テキストの周囲を光らせて四隅を円形にする効果を実現する方法についてアドバイスをお願いしたいです。

この投稿は、pl02206984 によって 2013-05-10 11:41:08 に最終編集されました。

私は初心者です、アドバイスを求めたいのですが、入力テキストをクリックした後に周囲に光る効果を実現するにはどうすればよいですか。四隅を円形にしますか?四隅に写真を使用しますか?しかし、効果は良くありません。光る効果、つまり境界線がかすかに光る効果が必要ですが、輪郭はグラデーションカラーを実現できないため、専門家にアドバイスを求めます。複数のブラウザをサポートすることが最善です。
レンダリングは次のとおりです:

ディスカッションに返信 (解決策)

入力の境界線を非表示にし、入力に背景画像スタイルを使用し、背景画像スタイルを持つ 2 つの CLASS を使用してフォーカスの取得を切り替えます。そして集中力を失う。 (ヒント: 背景画像は、丸い角、光るエッジ、または任意の効果を使用して描画できます)

GIF 画像の上に入力を行うだけです

自由に入力を適用します
以下は CSS です:
input {
表示: インラインブロック;
マージン-ボトム: 9px;
背景色: #cccccc;
ボーダー半径: 3p;トランジション: ボーダー線形 0.2 秒、ボックスシャドウ線形 0.2 秒;
input:focus {
アウトライン: 細い点線 9;
ボックスシャドウ: インセット0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

自由に入力を適用してください
以下は CSS です:
input {
display:インラインブロック;
幅: 210 ピクセル;

ラインの高さ: 18 ピクセル;

境界線: 3 ピクセル;リニア 0.2s、ボックスシャドウ リニア 0.2s; }
input:focus {
アウトライン: 細い点線 9;
ボックスシャドウ: インセット 0 1px 1px; rgba(0, 0 , 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
ありがとう、ただしこれをテストしたところ、IE9 では動作しませんでした。クローム効果が間違っていました。そしてそれはゲーム上で完璧に機能しました。でも、インスピレーションを得て、自分でもやってみました