[css]ぼかし（ガウス）を付ける方法と縁の処理

はい。

基本形
画像にやるとき
1. 縁の処理について

基本形

こんな感じにすると、指定した要素にボカシが掛かる。

.example{
    filter: blur(10px);
}

これだと後ろに重なったものがボケる。

.example{
    backdrop-filter: blur(10px);
}

急にぼかしが入ってびびるんで、背景色を重ねるとか要素に線を引いて区切りを見せるのがいいかも知んない。まあ、使い方次第。

画像にやるとき

.example{
    filter: blur(10px);
}
.example img{
    filter: blur(10px);
}

画像が含まれてれば良いんで、付与するのは画像そのものでも親要素でもいい。

縁の処理について

画像自体がボケるので、画像の周囲もボケる。背景が透明なpngとかであれば全部がボケてくれて願ったり叶ったりだけど、jpegだと嬉しくなかったりする。

なので、背景用途で使ってる画像をこれでぼかすとダサいことになる。表示している部分がボケてくれたら良いのに、ボケてるはずなのに、気に食わないことになる。

blurをかけると画像の周囲が薄くなって背景色を拾う。

そういうのが嫌な場合は、例えばこんな感じにする。

<div class="example">
    <picture><img src="hogehoge.jpg"></picture>
</div>

.example{
    width: 120px;
    height: 120px;
}
.example picture{
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.1);
}
.example picture img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 80%;
    filter: blur(10px);
}

例にするにはえらく局所的な組み方だけども。

要するに、かっこ悪いところは画面外に逃してしまえということ。

親要素にoverflow:hidden;をつけてはみ出しを削ってもいい。

組み方によってはHTMLから修正しないといけないことになったりするので注意。