Question

我有一个学校项目，我需要复制一个网站。我想以拉伸的椭圆形方式在文本下方添加阴影效果，但我不知道该怎么做，我最终得到的是模糊的矩形。

这就是我目前所拥有的Click here

这是我拥有的代码（创建模糊的矩形

box-shadow: 0 50px 20px -8px #000000;

有人能帮助我如何使我现在的阴影变成应该的阴影吗？（第二张图片）

预先感谢

Answer 1

我将使用伪元素，将其平移并旋转到transform，然后向其添加filter: blur。请注意最终的兼容性问题。

button {
  position: relative;
  margin: 2rem;
}

button::after {
  content: '';

  position: absolute;  
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform: translate(0, 200%) rotateX(70deg);
  
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(3px);
}

<button>Click me</button>

CSS椭圆形框阴影太模糊

1 个答案: