CSS Box Shadow

CSS box-shadow अट्रिब्यूट

CSS box-shadow गुण छाया को एलीमेंट पर लागू करता है।

सबसे सरल उपयोग यह है कि केवल आनुक्रमिक छाया और ऊंचाई निर्दिष्ट करें:

श्वेत box-shadow के साथ पीला <div> एलीमेंट

इनस्टैंस

div {
  box-shadow: 10px 10px;
}

आप खुद एक प्रयोग करें

अगले, छाया में रंग जोड़ें:

धुंधले box-shadow के साथ पीला <div> एलीमेंट

इनस्टैंस

div {
  box-shadow: 10px 10px grey;
}

आप खुद एक प्रयोग करें

अगले, छाया में धुंधलापन जोड़ें:

पीला <div> एलीमेंट, धुंधले box-shadow के साथ

इनस्टैंस

div {
  box-shadow: 10px 10px 5px grey;
}

आप खुद एक प्रयोग करें

कार्ड

आप इसके साथ इस्तेमाल कर सकते हैं: box-shadow गुण उत्पादन पेपर कार्ड प्रभाव देखें:

1
January 1, 2021
कॉफी
कॉफी

इनस्टैंस

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

स्वयं को प्रयोग करें: कागज कार्डस्वयं को प्रयोग करें: इमेज कार्ड

CSS शेडो अट्रिब्यूट

नीचे दिए गए तालिका में CSS के शेडो अट्रिब्यूट को दर्शाया गया है:

अट्रिब्यूट वर्णन
box-shadow एक एलिमेंट को एक या अधिक शेडो जोड़ें
text-shadow पाठ में एक या अधिक शेडो जोड़ें