html - 如何使用CSS和HTML实现光圈阴影效果？

Question

下面这种光圈阴影效果怎么实现呢？

试了下，用filter: blur(),效果不是很好

Answer 1

使用渐变背景色就可以了：

.demo {    background: rgb(33,41,50);    background: radial-gradient(circle, rgba(33,41,50,1) 0%, rgba(46,55,66,1) 25%, rgba(33,41,50,1) 50%, rgba(46,55,66,1) 75%, rgba(46,55,66,1) 100%); }

可以直接使用在线工具生成和调试 �� 在线生成CSS渐变色工具

Answer 2

没看到什么光圈阴影，是指背景色么？感觉有个中心渐变就可以了。

Answer 3

要实现这种光圈阴影效果，你可以使用CSS的box-shadow属性。box-shadow属性允许你为元素添加阴影效果，其中包括模糊半径（blur radius）来模拟模糊效果。下面是一个示例代码，展示如何使用CSS和HTML实现类似的光圈阴影效果：

HTML:

<div class="circle"></div>

CSS:

.circle {  width: 200px;  height: 200px;  border-radius: 50%;  background-color: #000;  box-shadow: 0 0 10px #fff; /* 阴影效果 */}

在上面的代码中，我们创建了一个div元素，并为其应用了一个类名为circle的样式。在CSS样式中，我们设置了元素的宽度和高度为200像素，并使用border-radius: 50%将元素设置为圆形。然后，我们使用background-color属性将元素的背景颜色设置为黑色（#000）。

最后，我们使用box-shadow属性添加阴影效果。这里的关键是设置模糊半径（blur radius）为10像素，并使用白色（#fff）作为阴影的颜色。通过调整这些值，你可以控制阴影的模糊程度和颜色。

请注意，上述代码只是一个简单的示例，你可以根据需要进行自定义和调整。例如，你可以通过调整元素的尺寸、颜色和阴影效果来适应你的实际需求。