將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。