CSS बॉक्स-रिफ्लेक्ट प्रकृति

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

box-reflect इस गुण का उपयोग एलिमेंट के प्रतिबिंब प्रभाव को बनाने के लिए किया जाता है。

box-reflect गुण का मान हो सकता है:

• belowनीचे (ऊपर ओर)
• aboveऊपर (नीचे ओर)
• leftबाईं (दायाँ ओर)
• rightदायाँ (बाईं ओर)

ध्यान दें:box-reflect इस गुण को अनिवार्यता से उपयोग करना होगा -webkit- पूर्व-संज्ञा。

उदाहरण

उदाहरण 1

इस्तेमाल के नीचे रिफ्लेक्ट असर जोड़ें

img {
  -webkit-box-reflect: below;
}

अपने आप साफल्य प्रयोग करें

उदाहरण 2

box-reflect गुण को किसी भी दृश्यमान HTML एलीमेंट पर लगाया जा सकता है। नीचे दिए उदाहरण में <p> टैग के नीचे रिफ्लेक्ट असर बनाया गया है:

p {
  -webkit-box-reflect: below;
}

अपने आप साफल्य प्रयोग करें

उदाहरण 3

box-reflect गुण दो मान व्याकरण का उपयोग कर सकता है। नीचे दिए उदाहरण में इस्तेमाल किया गया है कि इस्तेमाल के नीचे रिफ्लेक्ट असर बनाया गया है और 70px की दूरी सेट की गई है:

img {
  -webkit-box-reflect: below 70px;
}

अपने आप साफल्य प्रयोग करें

उदाहरण 4

box-reflect गुण तीन मान व्याकरण का उपयोग कर सकता है। नीचे दिए उदाहरण में इस्तेमाल किया गया है कि इस्तेमाल के नीचे रिफ्लेक्ट असर बनाया गया है, 10px की दूरी सेट की गई है और फ़ेड आउट होता है:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

अपने आप साफल्य प्रयोग करें

CSS व्याकरण

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

गुण मान

तकनीकी विवरण

ब्राउज़र सहारा

तालिका में संख्याएं पहली बार पूरी तरह से इस गुण को सहारा देने वाले ब्राउज़र का संस्करण के रूप में दिखाई देती हैं。

जो -webkit- प्रीफ़िक्स से शुरू होने वाले संख्या का अर्थ है कि इस प्रीफ़िक्स को सहारा देने वाला पहला संस्करण है。