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 Devツール（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

私はこの問題を知っているし、完全な影を達成するために、本当にdiffcultことができます。影を作成するには、this oneのようなジェネレータを使用することをお勧めします。

また.c-depot__boxの場合は、background-colorを白に設定する必要があります。