CSS：画像の周りに白い輝きを作成する

Question

未知のサイズの画像の境界線として白い輝きを作成するにはどうすればよいですか？ （9 IE <ではサポートされません）

Answer 1

使用シンプルなCSS3

img 
{ 
    box-shadow: 0px 0px 5px #fff; 
} 

これはあなたの周りの輝きを希望された画像を選択するために、より具体的なセレクタを使用して、ドキュメント内のすべての画像の周りに白い輝きを置きます。

img 
{ 
-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
box-shadow: 0px 0px 5px #fff; 
} 

IEのためにあなたが輝きを使用することができます：あなたは自分のブラウザの最新バージョンを持っていないユーザーが心配している場合は

は、これを使用もちろん:)の色を変更することができますフィルタ（それをサポートするブラウザがわからない）

img 
{ 
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5); 
} 

あなたに合ったものを見るために設定して再生する:)

Answer 2

ターゲットブラウザが何であるかに依存します。あなたは、例えば、on this exampleをベースと回避策を実装する必要があり、古いブラウザの場合

-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
     box-shadow: 0 0 5px #fff; 

が、あなたはおそらく、余分なマークアップが必要になります。新しいものではas simple asです。

Answer 3

CSS3を使ってそのようなエフェクトを作成できますが、CSS3PIEのようなポリフィルを使用しない限り、ボックスシャドウをサポートする最新のブラウザでのみ表示されます。たとえば、次のようなことができます。http://jsfiddle.net/cany2/

Answer 4

@tamir;あなたはcss3プロパティでそれを行う。

img{ 
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2; 
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2; 
box-shadow: 0px 0px 3px 5px #f2e1f2; 
} 

あなたは、あなたが、それはIEの古いバージョンで作業する必要がある場合は、&あなたこれらのブラウザでボックスシャドウをエミュレートするためにCSS3 PIEを使用することができ、ここでhttp://css3generator.com/

から生成することができますフィドルhttp://jsfiddle.net/XUC5q/1/ &をチェックカイルは、あなたがここからあなたのフィルタを生成することができ、この

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5') 

のように言ったようfilterを使用することができます

Answer 5

ここに遅れています。しかしちょうど余分な楽しみのビットを追加したいと思った。

box-shadow: 0px 0px 5px rgba(0,0,0,.3); 
padding:7px; 

あなたにイメージで埋め尽くされた見栄えを与える。パディングは、シミュレートされた白い枠線（または設定した枠線）を表示します。 rgbaはあなたに特定の色の不透明度を許すだけです。 0,0,0は黒である。他のRGBカラーと同じように簡単に使うことができます。

これが誰かを助けることを願っています！

Answer 6

魅力的な作品です！

.imageClass { 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
} 

Voila！それでおしまい！明らかに、これは動作しません、しかし、誰が気に...