आउटलाइन-ऑफसेट गुण

outline-offset गुण बाहरी रूपरेखा - उस सीमा के लिए इंडेंटेशन निर्धारित करता है जो कोई स्थान नहीं लेती है। इस गुण का मान प्रतिशत को छोड़कर आकारों की कोई भी इकाई हो सकता है। डिफ़ॉल्ट मान: 0। सकारात्मक मान तत्व से बाहर की ओर रूपरेखा को स्थानांतरित करता है, नकारात्मक मान अंदर की ओर।

सिंटैक्स

cssसिलेक्टर {
  outline-offset: मान;
}

उदाहरण . सकारात्मक मान

रूपरेखा तत्व से दूर हो जाती है (इसे बैकग्राउंड द्वारा हाइलाइट किया गया है):

html<div id="elem"></div>

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण . नकारात्मक मान

रूपरेखा तत्व के अंदर स्थित है:

html<div id="elem"></div>

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण . आउटलाइन + बॉर्डर का नकारात्मक मान

आप यह दिलचस्प प्रभाव बना सकते हैं (सीमाओं के बीच सफेद अंतराल की मोटाई पर ध्यान दें, यह 10px है, न कि 14, क्योंकि 4px की अपनी मोटाई के साथ outline ने इसमें से कुछ हिस्सा ले लिया):

html<div id="elem"></div>

css#elem {
  outline-offset: -14px;
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

यह भी देखें