如何使用CSS制作神经网络风格的元素阴影？

Question

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

我正在尝试通过在顶部和左侧使用彩色阴影，在底部和右侧使用不同彩色的阴影来进行此操作。

我研究了MDN for box-shadow，我可以看到box-shadow支持多个值，但是与其在CSS的其余部分上一样，不如从右上角到左下角，多个值实际上是堆叠在所有面上的全尺寸阴影彼此顶部：

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

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

请注意，'no'是可以接受的答案，但是不能创建其他HTML（即，不使用CSS）。 HTML中的按钮通常用box-shadow

表示

Answer 1

正如我在重新打开注释之前的注释中所建议的那样，我的建议是使用伪元素来实现双重阴影效果。您可能只用一个就可以实现这一目标，但是这是我为了说明这一点而做出的快速和肮脏的实例：

<button>A button</button>

    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;
    }

Answer 2

此问题最初是由主持人错误地关闭的。在问题被关闭且不允许回答的时间内，多个用户已与我联系以提供解决方案。由于这个问题现在已经被重新讨论，我以社区Wiki的身份发布了他们的解决方案，并对此表示赞赏，因此我不会因果报应。

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

neumorphism.io CSS生成器

[<a href="#" class="button">Request</a>处现在有一个online Neumorphism CSS generator

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;
 } 
 
 

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

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

 
 <button>This is a button</button>
 
 

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);
}