CSS掩蔽或替代方案，以实现径向聚焦

上面的图片是一个想法，假设我有一个固定的dix覆盖页面，我想专注于一个区域

.fixed-full {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
 }

我不认为上面的工作与我试图实现我将需要使用一个遮罩或径向梯度

我读了一些关于webkit掩蔽和svg掩蔽的图坦卡蒙，弄明白这一点有点乏味，我希望能得到一些建议

我玩了一些盒影

盒影：-20px30px380px280pxrgba（0,0,0,0.7）插图这是一个很酷的效果，但并不完全是我想要的

我不介意使用javascript解决方案

CSS结果：感谢VAL

CSS结果：基于雷米的方法，谢谢
看起来不错，但很难得到一个清晰的圆圈，也许如果我摆弄它：）
你可以更容易地得到它

CSS

您只需使用边界半径设置div，使其成为一个圆，而背景色是圆中更透明的颜色。然后设置一个大的边框（我用的是500px，如果需要的话可以再高一点）。为了便于定位，请设置与负边距相同的数量。并将边框颜色设置为所需的任何颜色

如果你想让它更容易进入屏幕上的一个确定点，你可以让边距完全压缩边距和大小。比如说

border-width: 1000px;
height: 100px;
width: 100px;
margin: -1050px;

边距补偿了边框和一半大小，因此设置top=y left=x会将圆设置为x y左右
您可以使用径向渐变（例如，使用红色遮罩）实现所需效果：

与此小提琴一样（注意：文本背景为黄色，遮罩为红色）

为了更好地控制模糊区域，您还可以使用像素代替停止位置的百分比（高于40%），那么只有前两个参数的比率才重要，例如：

background: radial-gradient(10px 5px at 100px 50px, rgba(255, 0, 0, 0) 200px, rgba(255, 0, 0, .8) 202px);

嘿，我从没想过这样的事。。谢谢，让我试试。这很好，谢谢。我想了解这背后的一些数学知识，什么是使边界达到100%的最佳方法，以及最重要的是，什么是一个很好的解决方案，以确定页面上的位置，使其与所有屏幕大小一致。我把它应用到我的项目中，看起来不错（上面的屏幕截图）。我只是想让它保持一致。我添加了另一个数学，以使圆更容易。非常感谢。。这将是很好的投掷一个过渡，并使用它作为一个旅游模式。能够更有效地计算它将允许我根据我想要显示的内容添加一个类。好的，我现在明白了。还有一个指向更多文档的链接这很酷，但是有太多的模糊，我无法调整它，使其成为一个纯圆。实际上，你可以（查看40%和45%）（如果你真的不想模糊，请随意放置40%和40%）酷1+，但它不是一个平滑的圆，边缘有点起伏。然而，我确实喜欢圆的定位，它比使用类似于边距的VAL方法更为精确。两者的利弊。。这是一个小提琴，它是你的，但你可以看到它是多么容易以圆圈为中心。哇，是的，这绝对是一个考虑的方法。我真的很喜欢这两种方式，让我四处玩玩，看看什么更适合我正在努力实现的目标。如果我能投两个票，我会的。
background: radial-gradient(200px 100px at 100px 50px, rgba(255, 0, 0, 0) 40%, rgba(255, 0, 0, .8));

background: radial-gradient(10px 5px at 100px 50px, rgba(255, 0, 0, 0) 200px, rgba(255, 0, 0, .8) 202px);