मैं एक फोटो स्टाइल को दोहराने की कोशिश कर रहा हूं फोटोशॉप मॉक-अप में इस पर दो छायाएं हैं। पहली छाया एक आंतरिक लाइटर बॉक्स छाया (2px) है, और दूसरी बटन (5px) के बाहर एक ड्रॉप छाया है।
फोटोशॉप में यह आसान है - इनर शैडो और ड्रॉप शैडो। सीएसएस में मैं स्पष्ट रूप से एक या दूसरे को रख सकता हूं, लेकिन एक ही समय में दोनों नहीं।
यदि आप किसी ब्राउज़र में नीचे दिए गए कोड को आज़माते हैं, तो आप देखेंगे कि बॉक्स-शैडो इनसेट बॉक्स-शैडो को ओवरराइड करता है।
यहाँ इनसेट बॉक्स छाया है:
box-shadow: inset 0 2px 0px #dcffa6;और यह वही है जो मैं बटन पर ड्रॉप छाया के लिए चाहूंगा:
box-shadow: 0 2px 5px #000;संदर्भ के लिए, यहां मेरा पूर्ण बटन कोड (ग्रेडिएंट और सभी के साथ):
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;
}