将Boxshadow从Photoshop转换为CSS

Question

我试图在CSS中获得与Photoshop相同的结果，但无论我尝试什么，我都无法用CSS获得同样的效果。我尝试了CSS Photoshop以及使用不同的值，它总是在边缘模糊。

.c-depot {
  margin-bottom: 24px;
  text-align: center;
}

.c-depot__box {
  align-items: center;
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  padding: 24px 0;
  width: 250px;
}

.c-depot__box--shadow {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
}

.c-depot__box--shadow-mid {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
}

<div class="c-depot">
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">1</h3>
    <h3 class="c-depot__headline">Formular ausfüllen</h3>
    <p class="c-depot__quote">ganz einfach online</p>
    <div class="c-depot__icon">

    </div>
  </div>
  <div class="c-depot__box--shadow-mid c-depot__box">
    <h3 class="c-depot__step">2</h3>
    <h3 class="c-depot__headline">Verifizieren</h3>
    <p class="c-depot__quote">ganz einfach von Zu Hause aus</p>
    <div class="c-depot__icon">
    </div>
  </div>
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">3</h3>
    <h3 class="c-depot__headline">Loslegen</h3>
    <p class="c-depot__quote">ganz einfach Rendite einfahren</p>
    <div class="c-depot__icon">

    </div>
  </div>

https://codepen.io/HendrikEng/pen/EmNKvO

这应该是它的样子。非常感谢你们。

Answer 1

尝试重叠一些列并给它一个边框。

提示：在Chrome开发工具（F12）中，您可以点击紫色图标轻松编辑框阴影。

https://codepen.io/anon/pen/oWYLvj

.c-depot {
  margin-bottom: 24px;
  text-align: center;
}

.c-depot__box {
  border:1px solid #e2e2e2;
  align-items: center;
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  padding: 24px 0;
  width: 250px;
  background-color: #fff;
}

.c-depot__box--shadow {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
}

.c-depot__box--shadow-mid {
  -webkit-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  margin-left:-5px;
}

.c-depot__box--shadow.last{
  margin-left:-5px;
  -webkit-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
  box-shadow: -9px 2px 20px 0px rgba(0,0,0,0.15);
}

<div class="c-depot">
  <div class="c-depot__box--shadow c-depot__box">
    <h3 class="c-depot__step">1</h3>
    <h3 class="c-depot__headline">Formular ausfüllen</h3>
    <p class="c-depot__quote">ganz einfach online</p>
    <div class="c-depot__icon">

    </div>
  </div>
  <div class="c-depot__box--shadow-mid c-depot__box">
    <h3 class="c-depot__step">2</h3>
    <h3 class="c-depot__headline">Verifizieren</h3>
    <p class="c-depot__quote">ganz einfach von Zu Hause aus</p>
    <div class="c-depot__icon">
    </div>
  </div>
  <div class="c-depot__box--shadow c-depot__box last">
    <h3 class="c-depot__step">3</h3>
    <h3 class="c-depot__headline">Loslegen</h3>
    <p class="c-depot__quote">ganz einfach Rendite einfahren</p>
    <div class="c-depot__icon">

    </div>
  </div>

Answer 2

我知道这个问题，实现完美的阴影真的很困难。我建议使用像this one这样的生成器来创建阴影。

另外，您应该为background-color将.c-depot__box设置为白色。