我正在做一个新的项目，我是新的::before和::after伪元素在CSS3。
我有以下Figma设计：

的数据
我尝试自己创建这样的设计，但得到了这样的输出：

的
在这里，我面临两个问题：
1.我不知道为什么这里的图像是模糊的。
1.最后有一个带有渐变边框的div。
我无法使用::after伪元素创建它。我试图解决这两个问题，但没有成功。
有人知道我做错了什么吗？

.middle-div {
  width: 427.23px;
  height: 528.56px;
  background: rgba(61, 61, 61, 0.37);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  filter: blur(9.5px);
  border-radius: 22px;
  transform: matrix(1, 0, -0.08, 1, 0, 0);
  position: relative;
}

.middle-div::before {
  content: "";
  width: 427.23px;
  height: 528.56px;
  background: url("https://via.placeholder.com/100");
  background-size: cover;
  position: absolute;
  filter: drop-shadow(24px 19px 32px rgba(0, 188, 197, 0.01));
  border-radius: 251px;
  transform: matrix(1, 0, -0.1, 1, 0, 0);
}

.middle-div::after {
  content: "";
  position: absolute;
  top: 1rem;
  width: 427.23px;
  height: 528.56px;
  filter: drop-shadow(22px 23px 12px rgba(36, 36, 36, 0.25));
  border-radius: 22px;
  transform: matrix(1, 0, -0.08, 1, 0, 0);
}

个字符