CSSで画像のエッジぼかし効果を実現する方法-CSSチュートリアル-php.cn

CSSで画像のエッジぼかし効果を実現する方法

WBOY

リリース： 2021-11-30 15:44:52

オリジナル

11346 人が閲覧しました

CSS では、「box-shadow」属性を使用して、画像のエッジぼかし効果を実現できます。「box-shadow:0 0 ぼかし距離シャドウサイズ #ffffff inset;」を追加するだけです。 " スタイルを画像要素に追加します。

CSSで画像のエッジぼかし効果を実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

#css で画像のエッジのぼかし効果を実現する方法

box-Shadow 属性を使用して画像のエッジのぼかし効果を実現できます。

この属性の構文は次のとおりです。

box-shadow: h-shadow v-shadow blur spread color inset;

ログイン後にコピー

その中で、box-Shadow 属性は、ボックスに 1 つ以上のドロップダウンシャドウを追加します。このプロパティは、シェードのコンマ区切りのリストで、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。

CSSで画像のエッジぼかし効果を実現する方法

例で見てみましょう例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
    .img-edge-cover {
    width: 180px;
    height: 180px;
    position: relative;
}
.img-edge-cover:after {
    position: absolute;
    content: &#39;&#39;;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0 0 50px 30px #ffffff inset;
}
.img-edge-cover img{
    width: 180px;
    height: 180px;
    display: block;
    margin-bottom: 20px;
}
    </style>
<div class="img-edge-cover">  
  <img src="1118.02.png" alt="photo">
</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSSで画像のエッジぼかし効果を実現する方法 # #(学習ビデオ共有: