82

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

4

6 に答える 6

141

単純な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);
}

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

于 2011-06-21T09:04:44.420 に答える
12

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

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

出来上がり！それでおしまい！明らかに、これはieでは機能しませんが、誰が気にしますか...

于 2013-11-05T17:44:12.440 に答える
9

@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また、kyleが次のように述べているように使用できます。

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

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

于 2011-06-21T09:11:44.760 に答える
3

ターゲットブラウザが何であるかによって異なります。新しいものでは、それは次のように簡単です：

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

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

于 2011-06-21T09:06:20.963 に答える
2

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

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

画像にパディングされた見栄えの良いものになります。パディングにより、シミュレートされた白い境界線（または設定した境界線）が得られます。rgbaは、特定の色に対してオピシティを実行できるようにするだけです。0,0,0は黒です。他のRGBカラーも同じように簡単に使用できます。

これが誰かに役立つことを願っています！

于 2012-12-18T20:46:31.683 に答える
0

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

于 2011-06-21T09:09:58.077 に答える