css - 使用 CSS 在 Z 轴上创建平滑倾斜的边界（“午餐托盘”效果）

Question

我想创建一个具有 3D 效果的元素：它看起来应该嵌入到背景中。

在整个问题中，我将参考https://neumorphism.io中的 Z 轴图。

我见过的大多数“下沉”元素的 CSS 在下沉区域和非下沉区域之间创建了硬边界。例如使用插入框阴影：

div {
  padding: 1rem;
  width: 10rem;
  box-shadow: inset 0px 3px 10px #bbb;
  background-color: #bbb1;
}

<div>Hello!</div>

使用 neumorphism.io 的 Z 轴图，上图如下所示：

垂直线表示元素内部和外部之间的硬视觉边界。

通过在元素外部添加更多阴影，我可以平滑 Z 轴图的顶部边缘：

div {
  padding: 1rem;
  width: 10rem;
  box-shadow: inset 0px 3px 10px #bbb, 0px -3px 10px #bbb;
  background-color: #bbb1;
  border-radius: 1rem;
}

<div>Hello!</div>

以上由以下内容表示：

不过，这并不是我想要的，因为那些硬边仍然存在（事实上，该元素开始类似于放置在页面上并从下方照亮而不是 3D 衰退的 3D 对象）。

我的理想元素应该类似于午餐托盘（图像），衰退为其他物体创造了 3D 空间，并由以下表示：

是否可以在 CSS 中创建具有这种边界差异的元素？

---

我很清楚围绕新拟态风格的担忧，尤其是那些关于对比的担忧。在这种情况下，这不是问题——我想使用这种风格来创造一个衰退，让高对比度的元素坐进去。

标签： css

Answer 1

您可以利用定位伪元素上的框阴影来接近我认为您正在寻找的内容：

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
  height: 100%; font-family: Arial;
}
body, div {
  display: flex; justify-content: center; align-items: center;
  background-color: #ddc;
}
body::before, body::after, div {
  content: ''; position: absolute;
  border-radius: 1.5rem;
  width: 5rem; height: 5rem;
  background-color: rgba( 0,0,0,0.25 );
}
div {
  z-index: 1; box-shadow: 0rem 0rem 1rem 1rem #ddc;  
  background-color: #ddc; color: rgba( 0,0,0,0.05 );  
  font-size: 2rem; font-weight: bold;
}
div::after {
  content: 'x'; transform: scaleY( 0.875 );
}
body::before {
  transform: translate( -0.5rem, -0.5rem );
  box-shadow: 0rem 0rem 1rem 0.5rem rgba( 0,0,0,0.5 );
  background-color: rgba( 0,0,0,0.5 );    
}
body::after {
  transform: translate( 0.5rem, 0.5rem );
  box-shadow: 0rem 0rem 1rem 0.5rem #fff; background-color: #fff;    
}

<div></div>

您似乎遇到的问题是模糊阴影和高光部分的边缘。使这些部分成为自己的元素，然后直接向它们添加框阴影会产生“羽毛”效果，使边缘变得柔和。

您应该能够将其缩小到您的项目需求。