Üzerinde iki gölge olan bir Photoshop mock-up bir düğme stili çoğaltmak çalışıyorum. İlk gölge bir iç çakmak kutusu gölgesidir (2px) ve ikincisi düğmenin (5px) dışında bir gölge.
Photoshop'ta bu kolaydır - İç Gölge ve Alt Gölge. CSS'de görünüşe göre biri ya da diğeri olabilir, ancak her ikisi de aynı anda olamaz.
Aşağıdaki kodu bir tarayıcıda denerseniz, kutu gölgesinin iç kutu gölgesini geçersiz kıldığını görürsünüz.
İç metin kutusu gölgesi:
box-shadow: inset 0 2px 0px #dcffa6;Ve düğmedeki alt gölge için şunu istiyorum:
box-shadow: 0 2px 5px #000;Bağlam için, tam düğme kodum (degradeler ve tümü ile):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}