css图片阴影

<div class="d1 shadow-blur"></div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .d1{
            width: 500px;
            height: 200px;
            margin:50px;
            background-image: url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg)
        }
        .shadow-blur {
            position: relative;
        }

        .shadow-blur::before {
            content: "";
            display: block;
            background: inherit;
            filter: blur(10px);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 10px;
            left: 10px;
            z-index: -1;
            opacity: 0.4;
            transform-origin: 0 0;
            border-radius: inherit;
            transform: scale(1, 1);
        }

      

    </style>