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

Question

我正在尝试在 CSS 中重新创建 Alexander Plyuto's modern skeumorphic style (now called neumorphism):

我试图通过在顶部和左侧设置彩色阴影，在底部和右侧设置不同颜色的阴影来实现此目的。

我研究了 MDN for box-shadow，我可以看到 box-shadow 支持多个值，但与 CSS 的其余部分不同，多个值实际上是堆叠在一起的所有侧面的全尺寸阴影：

The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

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

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

表示

Answer 1

This question was originally closed by a moderator in error. During the time the question was closed, and answers were not allowed, multiple users have contacted me with solutions. As the question has now been reopened, I'm posting their solutions, with credit to them, as as community wiki so I don't get karma.

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

neumorphism.io CSS 生成器

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

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

Use two shadows (as mentioned), but with the offsets arranged so that one covers the top and left, the other covers bottom and right. As commenters have noted the gradients can overlap. It's likely not possible to copy the demo, as the demo has a wide spread radius but no overlap, which cannot be achieved in CSS as the shadows stack on top of each other.
 
 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 的回答（在回答结束时在聊天中提供）

Use a pseudo element, that has a gradient background, and is itself blurred. It's likely not possible to copy the demo here either, as the higher amount of darkness in the start of the gradient means that the blurry shadow isn't uniform:
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>

Answer 2

重开之前我在评论里说，我的建议是用伪元素来实现双影效果。你可能只需要一个就可以实现这一点，但这是我快速展示的例子：

    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>

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

How can I make neumorphism-style element shadows using CSS?

css

box-shadow

neumorphism.io CSS 生成器

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

@disinfor 的回答（在回答结束时在聊天中提供）