使用 CSS 模糊背景过滤器元素的边缘 [英] Blur the edges of a backdrop-filter element with CSS

查看：16
本文介绍了使用 CSS 模糊背景过滤器元素的边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

document.querySelector( 'style' ).innerHTML += `div {宽度:40rem；高度:1rem；背景色:#444；}.earth_orbit, .moon {宽度:15rem；左边距:100%；背景色:#222；；}.earth_orbit::before {宽度:5rem；高度:5rem；背景色:#08f；}.月亮 {宽度:2.5rem；高度:2.5rem；背景色:#ddd;}部分 {正确:5%；宽度:37.5%；高度:50%；字体大小:5rem；字体粗细:粗体；文本对齐:居中；背景过滤器:模糊(2rem)；-webkit-backdrop-filter: 模糊(2rem)；/* 过滤器:模糊(1rem)；*//* 只对元素内部进行模糊处理，忽略参数 */}`;

*, * ::before, * ::after {边距:0；填充:0；box-sizing: 边框框；}html，正文，主要{溢出:隐藏；高度:100%；背景颜色:#111；颜色:#eee;}html {字体系列:Arial；字体大小:1.5vmin；}主要，div，部分{显示:弹性；对齐内容:居中；对齐项目:居中；}div, div::before, 部分 {位置:绝对；z-index:自动；宽度:10rem；高度:10rem；背景色:#f90；边界半径:5rem；内容: '';}.moon::before {显示:无；}