CSS box-shadow विशेषता

परिभाषा और उपयोग

box-shadow गुण गोलाकार को एक या अधिक छाया जोड़ता है।

सूचना:कृपया border-image-* गुण का उपयोग करके सुंदर फ्लैट बटन बनाएं!

अन्य संदर्भ:

CSS3 शिक्षा:CSS3 किनारा

HTML DOM संदर्भ दस्तावेज़:boxShadow गुण

उदाहरण

डीवी एलीमेंट को box-shadow जोड़ें:

डीवी
{
box-shadow: 10px 10px 5px #888888;
}

अपने आप से प्रयास करें

पृष्ठ के नीचे अधिक उदाहरण हैं।

CSS व्याकरण

box-shadow: एच-शैडओ वी-शैडओ ब्लर स्प्रीड रंग इनसेट;

टिप्पणी:box-shadow गोलाकार को एक या अधिक छाया जोड़ता है।इस गुण का मान कमा द्वारा अलग-अलग छायाएं से बना होता है जो 2-4 लंबाई मान, वृद्धि की संभावना है रंग और वृद्धि की संभावना है inset शब्द द्वारा निर्दिष्ट होता है।लंबाई मान विहीन होने पर लंबाई 0 होती है।

गुण मान

मान वर्णन परीक्षण
एच-शैडओ अनिवार्य।स्थानांतरण का स्थान।नकारात्मक मान अनुमति दिया जाता है। परीक्षण
वी-शैडओ अनिवार्य।अड्ड़ी छाया का स्थान।नकारात्मक मान अनुमति दिया जाता है। परीक्षण
ब्लर वृद्धि की संभावना है।धुंधलापन की दूरी。 परीक्षण
स्प्रीड वृद्धि की संभावना है।छाया का आकार。 परीक्षण
रंग वृद्धि की संभावना है।छाया का रंग।CSS रंग मान पर देखें। परीक्षण
इनसेट वृद्धि की संभावना है।बाह्य छाया (outset) को आंतरिक छाया में बदलें。 परीक्षण

तकनीकी विवरण

मूलभूत मान: कोई नहीं
विरासत करना: नहीं
संस्करण: CSS3
जेवेस्क्रिप्ट व्याकरण: ऑब्जेक्ट.style.boxShadow="10px 10px 5px #888888"

अधिक उदाहरण

टेबल पर फेंकी गई तस्वीर
इस उदाहरण में 'बोलीमैया' चित्र को बनाने और चित्र को घुमाने के तरीके दिखाया गया है।

ब्राउज़र समर्थन

तालिका में नंबर इस गुण के पूर्णतः समर्थित पहले ब्राउज़र संस्करण को दर्शाते हैं।

जो -webkit- या -moz- से लिए गए नंबर उपच्छेद का पहला संस्करण का उपयोग करते हैं।

च्रोम IE / एज फ़ायरफ़ॉक्स सफ़ारी ओपेरा
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5