如何使用 CSS 制作新拟态风格的元素阴影？

Question

我正在尝试在 CSS 中重新创建 Alexander Plyuto's modern skeumorphic style（现在称为 neumorphism）：

我试图通过在顶部和左侧使用彩色阴影，在底部和右侧使用不同颜色的阴影来做到这一点。

我研究了MDN for box-shadow，我可以看到box-shadow 支持多个值，但与其他 CSS 不同的是，多个值实际上是堆叠的所有边的全尺寸阴影相互叠加：

多个框阴影的z-ordering与多个文本阴影相同（第一个指定的阴影在顶部）。

是否可以在 CSS 中创建这种效果？

请注意，“否”是一个可接受的答案，但创建额外的 HTML（即不使用 CSS）则不是。 HTML中的按钮通常由<button>A button</button>表示

Answer 1

正如我在重新打开之前在 cmets 中建议的那样，我的建议是使用伪元素来实现双重阴影效果。你可能只用一个就可以做到这一点，但这是我快速而肮脏的例子，我已经准备好炫耀它了：

    body {
      background: #424242;
    }

    .button {
      box-sizing: border-box;
      display: flex; /* Just to center vertically */
      align-items: center;
      justify-content: center;
      width: 160px;
      height: 55px;
      border-radius: 1em;
      text-align: center;
      font-family: sans-serif;
      font-weight: 600;
      color: #2b2a2e;
      text-decoration: none;
      background: linear-gradient(48deg, #c4ccd1, #e1e5e8);
      position: relative;
      z-index: initial;
    }

    .button::before, .button::after {
      content: "";
      display: block;
      position: absolute;
      width: 160px;
      height: 35px;
      background: transparent;
      border-radius: 1em;
      z-index: -1;
      opacity: 0.65;
    }

    .button::before {
      top: -1px;
      left: -1px;
      background-color: #fff;
      box-shadow: 0 0 10px 5px #fff;
    }

    .button::after {
      bottom: -1px;
      right: -1px;
      background-color: #b6c7e7;
      box-shadow: 0 0 10px 5px #b6c7e7;
    }

<a href="#" class="button">Request</a>

Answer 2

此问题最初是由版主错误关闭的。在问题被关闭且不允许回答期间，多个用户与我联系并提供了解决方案。由于问题现已重新打开，因此我发布了他们的解决方案，感谢他们，作为社区 wiki，所以我不会得到因果报应。

简而言之：CSS 本身并没有提供直接在不同侧面设置不同阴影颜色的方法。但是有一些方法可以实现神经拟态外观 - 见下文：

neumorphism.io CSS 生成器

现在online Neumorphism CSS generatorhttps://neumorphism.io/ 有一个https://neumorphism.io/

@noomorph 的回答（在回答结束时作为评论提供）

使用两个阴影（如前所述），但要安排偏移量，以便一个覆盖顶部和左侧，另一个覆盖底部和右侧。 正如评论者所指出的，渐变可以重叠。很可能不是 可以复制演示，因为演示的传播范围很广，但没有 重叠，这在 CSS 中无法实现，因为阴影堆叠在顶部 彼此的。

 
 body {
   background: lightgrey;
 }
 
 button {
   border: none;
   background-color: #efefef;
   color: black;
   font-size: 24px;
   text-transform: uppercase;
   padding: 20px;
   margin: 50px;
   position: relative;
   border-radius: 10px;
   box-shadow:  -2px -2px 8px 4px white, 2px 2px 8px 4px #222;
 } 
 
 

 
 <button>This is a button</button>
 
 

@disinfor 的回答（在回答关闭时在聊天中提供）

使用具有渐变背景的伪元素，并且本身是模糊的。在这里也可能无法复制演示，因为渐变开始处的黑暗量较高意味着模糊阴影不均匀：

body {
  background: lightgrey;
}
button {
  border: none;
  background-color: white;
  color: black;
  font-size: 24px;
  text-transform: uppercase;
  padding: 20px;
  margin: 50px;
  position: relative;
  border-radius: 5px;
} 

button::after {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  background: linear-gradient(350deg, rgba(10,10,10,0.8) 0%, rgba(255,255,255,0.8) 100%);
  filter: blur(10px);
}

<button>This is a button</button>