4 毛玻璃效果

        body {
            margin: 100px;
            width: 300px;
            height: 300px;
            background: url("content.webp")no-repeat fixed;
        }
        main {
            height: 100px;
            color: white;
            padding: 20px;
            background: hsla(0,0%,100%,.3);
            position: relative;
            text-align: center;
            overflow: hidden;       把多余的模糊区域裁切掉
        }
        main::before {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            filter: blur(10px);
            background: url("content.webp")no-repeat fixed; /* 仅用于调试 */
            z-index: -1;
                        margin: -20px;        接近边缘处会逐渐消退   让伪元素相对其宿主元素的尺寸再向
外扩大
        }