如何利用 CSS 过滤器和嵌套元素实现图中黑色不规则块？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何利用 CSS 过滤器和嵌套元素实现图中黑色不规则块？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

不规则块：巧用“过滤器”和“嵌套”

针对想要实现图中黑色不规则块的需求，我们可以尝试如下方法：

第一步：使用滤镜技巧

通过滤镜，我们可以添加透明度和模糊效果，让元素呈现出不规则的视觉效果。

第二步：使用嵌套元素

为了改变不规则块的颜色和模糊程度，我们可以使用嵌套元素的方式。在父元素中设定颜色和模糊度，然后在子元素中改变这些属性。

代码演示

以下代码展示了如何实现图中的效果：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

.parent {
  width: 500px;
  height: 500px;
  filter: blur(5px) opacity(0.5);
}

.child-1 {
  width: 200px;
  height: 200px;
  background-color: #000;
  filter: blur(0px) opacity(1);
}

.child-2 {
  width: 100px;
  height: 100px;
  background-color: #fff;
  filter: blur(0px) opacity(0.5);
}

理论要掌握，实操不能落！以上关于《如何利用 CSS 过滤器和嵌套元素实现图中黑色不规则块？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注米云公众号吧！

React中如何保证useEffect在子组件中每次都执行？