css - 将 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>