如何用 CSS 创建不规则黑色阴影方块？

css 创造不规则阴影方块

如何使用 CSS 创建如下图所示的黑色不规则阴影块？

实现方法：

模糊蒙版

立即学习“前端免费学习笔记（深入）”；

可以通过应用模糊滤镜来创建不规则的边缘。例如，filter: blur() 可以模糊元素的边缘。

嵌套元素

为了处理颜色和内容模糊，可以嵌套元素。例如，创建一个包含内容的透明框，然后在上面覆盖一个黑色阴影块。这样，可以控制内容的清晰度，同时保持阴影块的不规则性。

代码示例：

/* 阴影块 */
.shadow-block {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: black;
  filter: blur(10px);
}

/* 内容框 */
.content-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px;
  background-color: transparent;
  opacity: 0.8;
}

以上就是如何用 CSS 创建不规则黑色阴影方块？的详细内容，更多请关注其它相关文章！