css - 如何获得盒子阴影的预期颜色？

Question

我有一个网站的 psd 图像，我想在盒子阴影上获得与图像中显示的相同的颜色代码。

例如： 背景颜色是：#e6e6e6 里面的内容是白色的。

我想获得 2px 宽且在现场的盒子阴影。右边的第一个像素有颜色代码：#e3e3e3

第二个像素具有颜色代码：#f1f1f1

尝试不透明度和其他设置需要时间，所以有没有办法输入这些颜色以获得预期的结果/颜色？

Answer 1

如果我理解得很好，您可以绘制 2 个没有模糊的阴影：来自 2 种颜色的 2 px 阴影。

div,
p {
  box-shadow: 0 0 0 1px #e3e3e3, 0 0 0 2px #f1f1f1;
  Background: #e6e6e6;
  color: white;
  padding: 1em;
  margin: 1em;
  text-shadow: 0 0 1px gray
}
p {
  box-shadow: 1px 1px #e3e3e3, 2px 2px #f1f1f1;
}
/*awfull  body bg for demo*/

body {
  background: linear-gradient(45deg, purple, turquoise, tomato);

<div>
  box
</div>
<p>
  or did you mean this ?
</p>