outlineसीएसएस में संपत्ति एक तत्व के बाहर चारों ओर एक रेखा खींचता है। यह सिवाय सीमा के समान है:
- यह हमेशा सभी पक्षों के आसपास जाता है, आप विशेष पक्षों को निर्दिष्ट नहीं कर सकते
- यह बॉक्स मॉडल का हिस्सा नहीं है, इसलिए यह तत्व या आसन्न तत्वों (डिबगिंग के लिए अच्छा!) की स्थिति को प्रभावित नहीं करेगा।
अन्य छोटे तथ्यों में शामिल है कि यह सीमा-त्रिज्या का सम्मान नहीं करता है (मुझे लगता है कि मुझे लगता है कि यह एक सीमा नहीं है) और यह हमेशा आयताकार नहीं है। यदि रूपरेखा अलग-अलग फ़ॉन्ट-आकारों के साथ एक इनलाइन तत्व के चारों ओर जाती है, उदाहरण के लिए, ओपेरा यह चारों ओर एक कंपित बॉक्स खींचेगा।
यह अक्सर एक्सेसिबिलिटी कारणों के लिए उपयोग किया जाता है, किसी लिंक पर जोर देने के लिए जब पोजिशनिंग को प्रभावित किए बिना और होवर की तुलना में अलग तरीके से टैब किया जाता है।
a:focus ( outline: 1px dashed red; )आशुलिपि
outline: ( || || ) | inheritयह सीमा के रूप में एक ही गुण लेता है, लेकिन इसके बजाय "रूपरेखा" के साथ।
उपरोक्त आशुलिपि लिखी जा सकती थी:
a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )टिप्पणियाँ
- आप तत्वों के सिर्फ एक (या दो, या तीन) पक्षों पर एक रूपरेखा निर्धारित नहीं कर सकते। केवल सभी पक्ष। ऐसी कोई बात नहीं के रूप में नहीं है
outline-top,outline-right,outline-bottom, याoutline-leftवहाँ के साथ है की तरहborder। - किसी भी वेबसाइट पर कंसोल खोलने का प्रयास करें और चल रहा है
document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- आप इस तरह से बहुत सारी साइट संरचना देखेंगे। outline:focusडिफ़ॉल्ट रूप से शैलियों के लिए उपयोग किया जाता है । याद रखें कि यदि आप कभी भीoutlineशैलियों को हटाते हैं, जैसेa:focus ( outline: 0; ), आपको कुछ अन्य प्रकार की नेत्रहीन विशिष्ट शैली का उपयोग करके उन्हें वापस जोड़ने की आवश्यकता है।
और जानकारी
- एमडीएन डॉक्स
ब्राउज़र का समर्थन
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| कोई | 1.2+ | 1.5+ है | 7+ | 8+ | कोई | 3.1+ |