CSS Outline
आप पहले से border खींच सकते हैं। Outline निकला हुआ औज़ार है लेकिन काम अलग है: यह border बॉक्स के बाहर एक रिंग खींचता है और — border के विपरीत — लेआउट जगह नहीं लेता। Outline जोड़ने पर पड़ोसी नहीं हटते।
Outline बनाम border
इन दोनों औज़ारों को अपने मानसिक नक्शे में अलग रखें।
📊 Outline बनाम border
| विशेषता | Outline | Border |
|---|---|---|
| लेआउट जगह | जगह नहीं लेता; बॉक्स का आकार वही रहता है | जगह लेता है; border बॉक्स बड़ा कर सकता है |
| आम जगह | Border किनारे के बाहर | Padding के चारों ओर |
| आम उपयोग | Focus रिंग, अस्थायी ज़ोर | स्थायी UI किनारे और कार्ड फ्रेम |
| बॉक्स मॉडल आकार गणना में | नहीं | हाँ (डिफ़ॉल्ट content-box के साथ) |
एक सादा outline
स्टाइल, चौड़ाई और रंग लगभग border जैसे काम करते हैं — लेकिन रिंग बाहर बैठती है।
बेसिक outline
css.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}Outline shorthand
जाना-पहचाना तिकड़ी: चौड़ाई, स्टाइल, रंग। दिखने के लिए स्टाइल ज़रूरी है — अकेला outline: 2px #000 काफी नहीं।
Outline shorthand
css.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}आम outline स्टाइल
Solid, dashed और dotted रोज़ के विकल्प हैं। outline: none रिंग हटाता है — सावधानी से (नीचे focus देखें)।
Outline स्टाइल नमूने
css.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }outline-offset — रिंग को बाहर धकेलें
outline-offset outline को border किनारे से दूर ले जाता है बिना लेआउट आकार बदले। धनात्मक मान बाहर धकेलते हैं; ऋणात्मक अंदर खींचते हैं।
Offset के साथ outline
css.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}एक जैसा दिखना, अलग लेआउट लागत
दो बॉक्स मिलते-जुलते लग सकते हैं, लेकिन सिर्फ border तय करता है तत्व कितनी जगह ले।
Border बढ़ता है; outline नहीं
css.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}
.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* दोनों बोल्ड लगते हैं; .with-border ज़्यादा लेआउट चौड़ाई लेता है */Focus-अनुकूल आदत
ब्राउज़र अक्सर कीबोर्ड focus दिखाने के लिए outline (या जैसी रिंग) इस्तेमाल करते हैं। हर चीज़ पर outline: none न लगाएँ। अगर focus को नया स्टाइल दें, स्पष्ट वैकल्पिक रिंग दें ताकि कीबोर्ड उपयोगकर्ता जानें वे कहाँ हैं।
दिखने वाली focus रिंग रखें
css.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}खुद आज़माएँ
- पैडेड बॉक्स को
borderऔर मोटीoutlineदें — पड़ोसी अपनी जगह रहें। - Outline स्टाइल
solid,dashed,dottedके बीच बदलें। outline-offset: 8pxजोड़ें और रिंग बाहर तैरते देखें।.with-borderऔर.with-outlineसाथ रखें — दृश्य भार मिलता-जुलता, लेआउट चौड़ाई अलग।- Globally outline हटाने के बजाय बटन पर
:focus-visibleस्टाइल करें।
आम गलतियाँ
- लेआउट चौड़ाई गिनते हुए outline को border समझना (outline आकार नहीं जोड़ता)
- बिना focus विकल्प सब पर
outline: none - सोचना कि outline पड़ोसियों को धकेलेगा (यह margin या border का काम है)
- स्टाइल के बिना चौड़ाई और रंग (
solid/dashed/ …) - अभी सीखे बॉक्स मॉडल परतों से outline मिलाना
सार
- Outline border के बाहर खिंचता है और लेआउट जगह नहीं लेता
- Shorthand: चौड़ाई, स्टाइल, रंग — स्टाइल ज़रूरी
outline-offsetबॉक्स आकार बदले बिना रिंग हिलाता है- Border स्थायी किनारों के लिए; outline focus और अस्थायी रिंग के लिए
- कीबोर्ड उपयोगकर्ताओं के लिए दिखने वाली focus outline (या समकक्ष विकल्प) रखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी