outline-offsetएक निर्धारित राशि से एक तत्व की सीमा किनारे से एक निर्धारित रूपरेखा ऑफसेट सीएसएस में संपत्ति। एक रूपरेखा, जो एक सीमा से भिन्न होती है, पृष्ठ पर कोई स्थान नहीं लेती है (एक बिल्कुल तैनात तत्व की तरह) इसलिए रूपरेखा किसी भी राशि में ऑफसेट की जा सकती है और यह आसपास के तत्वों की स्थिति या लेआउट को प्रभावित नहीं करेगी।
.example ( outline: solid 2px blue; outline-offset: 10px; )outlineसंपत्ति का उपयोग करके परिभाषित रूपरेखाओं का उपयोग अक्सर फ़ोकस रिंग के रूप में किया जाता है, पहुंच के लिए। इस प्रकार, outline-offsetसंपत्ति आपको फ़ोकस रिंग की स्थिति बदलने की अनुमति देती है।
मूल्यों
outline-offset एक प्रकार का मूल्य स्वीकार करता है, एक लंबाई, जो हो सकती है:
0(डिफ़ॉल्ट)- निर्दिष्ट इकाई (नकारात्मक मान सहित) के साथ कोई अन्य मान्य लंबाई
ध्यान दें outline-offset, जैसे outline-width, प्रतिशत मान स्वीकार नहीं करता है।
रूपरेखा की स्थिति
डिफ़ॉल्ट रूप से एक तत्व की रूपरेखा सीमा के बाहर तुरंत खींची जाती है (या जहां सीमा निर्धारित की गई थी, तो तुरंत बाहर खींचा जाएगा)। इसलिए, तकनीकी रूप से दो-सीमा प्रभाव के लिए रूपरेखा और सीमा को संयोजित करना संभव है:
वहां से, outline-offsetसीमा किनारे के सापेक्ष रूपरेखा की स्थिति को बदलने के लिए उपयोग किया जा सकता है। नीचे दिए गए डेमो को आज़माएं जो आपको स्लाइडर का उपयोग करके बाह्यरेखा के ऑफ़सेट मान को अंतःक्रियात्मक रूप से बदलने की अनुमति देता है। जब आप स्लाइडर को स्थानांतरित करते हैं तो ऑफ़सेट का मान पृष्ठ पर प्रदर्शित होता है:
जैसा कि ऊपर उल्लेख किया गया है, outline-offsetनकारात्मक मानों को स्वीकार करता है, जो रूपरेखा को विपरीत दिशा (तत्व के केंद्र की ओर) में ऑफसेट करेगा, जैसा कि अगले इंटरैक्टिव डेमो में दिखाया गया है। नोटिस -40px पर शुरू होता है:
यदि आप फ़ायरफ़ॉक्स में उपरोक्त डेमो देखते हैं, तो आपको पहली बार में रूपरेखा सही दिखाई देती है, लेकिन जब स्लाइडर समायोजित हो जाता है तो रूपरेखा सुचारू रूप से प्रस्तुत नहीं होती है और गलत स्थिति में समाप्त हो जाती है। तत्व को दृश्य से बाहर स्क्रॉल करना, फिर वापस दृश्य में, ब्राउज़र को सही स्थिति में रूपरेखा को फिर से लिखने के लिए मजबूर करता है। यह एक फ़ायरफ़ॉक्स-बग ही प्रतीत होता है।
outlineआशुलिपि का हिस्सा नहीं
करने के लिए इसी तरह की borderसंपत्ति, outlineसंपत्ति एक आशुलिपि है कि तीन गुण का प्रतिनिधित्व करता है: outline-color, outline-style, और outline-width।
outline-offsetसंपत्ति, इसलिए, इस या किसी अन्य आशुलिपि संपत्ति में प्रतिनिधित्व नहीं है, तो यह परिभाषित रूपरेखा से ही अलग से घोषित किया जाना चाहिए।
सम्बंधित
- रूपरेखा
- बॉर्डर
अधिक जानकारी
- W3C पर रूपरेखा-ऑफसेट
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ४ | २ | 1 1 | १५ | 3.1 |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 2.1 | ३.२ |
IE के लिए "आंशिक" संकेतक का अर्थ है IE का समर्थन नहीं करता है outline-offset, लेकिन outlineशॉर्टहैंड और इसके द्वारा प्रस्तुत तीन गुणों का समर्थन करता है ।
"पोजिशनिंग ऑफ़ द आउटलाइन" सेक्शन में ऊपर बताए गए बग के अलावा, फ़ायरफ़ॉक्स में एक बग है, जहाँ आउटलाइन गलत तरीके से खींची गई है, अगर एलीमेंट में चाइल्ड एलिमेंट है, जो पेरेंट बाउंड्री को ओवरफ्लो करता है (जैसे नेगेटिव मार्जिन या एब्सोल्यूट पोजिशनिंग का इस्तेमाल करके। । इसलिए, outline-offsetमूल माता-पिता तत्व सीमाओं के बजाय अतिप्रवाह वाले बच्चे द्वारा बनाई गई विस्तारित सीमा के सापेक्ष मूल्य होगा। इसे बेहतर ढंग से समझने के लिए, इस कोडपेन, इस स्टैक ओवरफ्लो थ्रेड और इस बग रिपोर्ट (इस बग में भेजने के लिए रीडर मैट वेन्स को क्रेडिट) देखें।