1. ホーム
  2. image

[解決済み] CSS: 画像の周囲に白い光を発生させる

2023-07-04 17:40:45

質問

サイズ不明の画像の境界線に白い輝きを持たせるにはどうしたらよいでしょうか。

どのように解決するのですか?

シンプルな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);
}

設定を弄って、自分に合うものを探してみてください :)