LoginSignup
@Tiger140304

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

html css 画像輪郭　線

Q&A

Closed

HTMLCSSimg

解決したいこと

画像の輪郭に線を入れたい。

発生している問題・エラー

画像の輪郭に線をつけることができない（枠組みではない）

該当するソースコード

              <nav-icon>
                <img src="![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525181/730ee3a5-577d-1725-d826-6292beab4a5e.png)" >
            </nav-icon>


header img{
    max-width: 60px;
    max-height: 60px;
    box-shadow: 0 0 5px #000;

}

自分で試したこと

自分で調べてみましたが、求めているcodeがなかったので、質問しました。

              <nav-icon>
                <img src="![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525181/730ee3a5-577d-1725-d826-6292beab4a5e.png)" >
            </nav-icon>

ここでは、nav-iconはheaderで囲んでいます。

0 likes

3Answer

juner
@juner

画像のαチャンネルに沿った影というのであれば css の filter プロパティにある drop-shadow() を複数指定することで実現できそうですね。

1Like

Comments

  1. @juner

    ※ただし、 drop-shadow を複数指定した場合、次に指定されたものにより shadow の範囲は増えるので注意が必要
    image.png

    .box-and-drop .drop-shadow {
    --shadow-size: 10px;
    filter: drop-shadow(var(--shadow-size) var(--shadow-size) 0 red) drop-shadow(calc(-1 * var(--shadow-size)) var(--shadow-size) 0 green) drop-shadow(calc(-1 * var(--shadow-size)) calc(-1 * var(--shadow-size)) 0 pink) drop-shadow(var(--shadow-size) calc(-1 * var(--shadow-size)) 0 yellow);
}

  2. @Tiger140304

    Questioner

    ありがとうございました。@juner様のおかげで解決することができました。質問をクローズします。

juner
@juner

ここで画像の輪郭は何を指していますでしょうか？ 質問の内容に うまくいかない例とうまくいった例（※要作図）の画像があった方がいいのではないでしょうか？

0Like

Your answer might help someone💌

LoginSign Up