时间戳

首页 > 解决方案 > 如何使用 CSS 制作新拟态风格的元素阴影？

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

问题描述

我正在尝试在 CSS 中重新创建Alexander Plyuto 的现代拟态风格（现在称为neumorphism）：

在此处输入图像描述

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

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

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

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

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

标签： cssbox-shadow

解决方案

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

    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>

推荐阅读