无法将 Figma 中的按钮设计转换为 CSS 代码答案

【问题标题】：Unable to convert button design in Figma to CSS code无法将 Figma 中的按钮设计转换为 CSS 代码
【发布时间】：2023-02-04 03:36:17
【问题描述】：

我在 Figma 中设计了这个按钮，但是当我从 Figma 的检查部分复制 CSS 属性时，我不会得到相同的输出，我在这里做错了什么？

Figma文件：https://www.figma.com/file/r3z3qwUsYGsn9SVDefWVoM/problem?node-id=2%3A6

div {
  display: flex;
  justify-content: center;
  align-items: left;
  height: 100%;
  text-align: center;
}

button {
  width: 300px;
  height: 64px;
  border: none;
  line-height: 23px;
  text-align: center;
  letter-spacing: 0.666667px;
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  background: linear-gradient(135.37deg, rgba(0, 0, 0, 0.35) 4.29%, rgba(255, 255, 255, 0.35) 95.6%);
  background-blend-mode: soft-light;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15), -5px -5px 10px #FAFBFF, 5px 5px 10px rgba(190, 106, 255, 0.3);
  border-radius: 20px;
}

<div>
  <button>Wednesday</button>
</div>

我希望按钮像那样

这就是我现在得到的

【问题讨论】：

不要发布codepen链接！将您的代码粘贴到此处！那会有帮助

标签： html css sass 3d figma

【解决方案1】：

不幸的是，即使按钮主体是透明的，按钮阴影也不会透过按钮主体显示出来。您将不得不找到另一种方法来呈现这样一个非常丰富的按钮。

请参阅下面的概念证明。

也可以在https://stackoverflow.com/a/9573440/46915找到详细的解释

body {
  background: #777;
}

div {
  display: flex;
  justify-content: center;
  align-items: left;
  height: 100%;
  text-align: center;
}

button {
  position: absolute;
  width: 300px;
  height: 64px;

  background-color: transparent;
  background-repeat: no-repeat;
  border: none !important;

  /*background: linear-gradient(135.37deg, rgba(0, 0, 0, 0.35) 4.29%, rgba(255, 255, 255, 0.35) 95.6%);*/

  background-blend-mode: soft-light;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15), -5px -5px 10px #FAFBFF, 5px 5px 10px rgba(190, 106, 255, 0.3);
  border-radius: 20px;
}

<div>
  <button>Wednesday</button>
</div>

【讨论】：