web-dev-qa-db-ja.com

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

未知のサイズの画像の境界線として白い輝きを作成するにはどうすればよいですか？

cssimagecss3borderglow
78
tamir

単純なCSS3を使用します（IE <9ではサポートされていません）

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);
}

設定を試して、自分に合ったものを確認してください:)

137
Kyle

@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; 
}

フィドルを確認してください http://jsfiddle.net/XUC5q/1/ ＆ここから生成できます http://css3generator.com/

IEの古いバージョンで動作する必要がある場合は、 CSS3 PIE を使用してそれらのブラウザーでボックスシャドウをエミュレートできます。また、カイルがこのように言ったように_filterを使用できます

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

ここからフィルタを生成できます http://samples.msdn.Microsoft.com/workshop/samples/author/filter/Glow.htm

8
sandeep

チャームのように機能します！

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

出来上がり！それでおしまい！明らかにこれはIEでは動作しませんが、気に...

5
Hank

ターゲットブラウザが何であるかに依存します。新しいものでは as simple as ：

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

古いブラウザの場合、 この例では に基づいた回避策を実装する必要がありますが、おそらく追加のマークアップが必要になります。

3
Boldewyn

ここでのパーティーに遅れました。ただし、ちょっとした楽しみを追加したかっただけです。

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

画像に埋め込まれた素敵な外観が得られます。パディングは、シミュレートされた白い境界線（または設定した境界線）を提供します。 rgbaは、特定の色に異議を唱えることを許可しています。 0,0,0は黒です。他のRGBカラーも簡単に使用できます。

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

2
Petrogad

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

0
kinakuta