पाठ 17 / 28

बैकग्राउंड, बॉर्डर और शैडो

एलिमेंट को भरें, फ्रेम करें, और पेज से उभारें।

बैकग्राउंड प्रॉपर्टी

background-color एक सपाट रंग, background-image: url(...), background-size: cover बॉक्स को भरने के लिए स्केल करता है, background-position उसे अलाइन करता है।

एक हीरो बैकग्राउंड

cover इमेज को बिना बिगाड़े बॉक्स भरने के लिए क्रॉप करता है।

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

border-radius और box-shadow

border-radius कोनों को गोल करता है (चौकोर बॉक्स पर 50% एक वृत्त बनाता है)। box-shadow: offsetX offsetY blur spread color एक मुलायम शैडो बनाता है।

उभरा हुआ कार्ड

छोटा blur + कम opacity शैडो को स्वाभाविक दिखाता है।

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}