html - 你如何编写一个盒子阴影来创建这个设计？

Question

我使用 Figma 设计了这个带有盒子阴影的图块。box-shadow 位于图块的顶部并居中，距左侧和右侧 40 像素，距底部 16 像素。模糊为 48px，y 偏移为 24px。颜色是 (0,0,0,0.16)。

标签： htmlcssbox-shadow

Answer 1

由于您没有提供瓷砖的尺寸，我制作了一个瓷砖，它遵循您想要的框阴影属性（具有合成尺寸）：

body {
  background:#F1F2F4;
}

#tile {
  margin-top:40px;
  margin-left:40px;
  width:300px;
  height:120px;
  background:#ffffff;
  border-radius:3px;
  box-shadow:0px 24px 48px 0 rgba(0,0,0,0.16);
}

<div id="tile"></div>

有关该box-shadow物业的更多信息：

• https://alligator.io/css/box-shadow/
• https://teamtreehouse.com/community/what-is-the-difference-between-spread-and-blur-radius-properties