सीएसएस काउंटर लाइन

यह एलिमेंट काला किनारा और नीला किनारा है, 10px चौड़ाई वाला है।

सीएसएस काउंटर लाइन

किनारा एलिमेंट के चारों ओर चित्रित किया जाने वाली एक रेखा है जो किनारे के बाहर है और एलिमेंट को उभार देता है।

CSS इस प्रकार के किनारा गुणों का होता है:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

ध्यान दें:किनारा के साथकिनाराअलग! अलगता इस बात में है कि किनारा एलिमेंट के किनारे के बाहर चित्रित किया जाता है और अन्य सामग्री से ओवरलैप हो सकता है। इसी तरह, किनारा एलिमेंट के आकार का हिस्सा भी नहीं है; एलिमेंट का कुल चौड़ाई और ऊंचाई किनारा रेखा की चौड़ाई से प्रभावित नहीं होती।

CSS किनारा शैली

outline-style गुण किनारा की शैली को निर्दिष्ट करता है और नीचे के मूल्यों को सेट कर सकता है:

  • dotted - बिंदु वाले किनारा को परिभाषित करें।
  • dashed - टिकटूरिंग रेखा वाले किनारा को परिभाषित करें।
  • solid - लांब रेखा वाले किनारा को परिभाषित करें।
  • double - दो रेखाओं वाले किनारा को परिभाषित करें।
  • groove - 3D घुमाया ग्रेवे को परिभाषित करें।
  • ridge - 3D उभरता ग्रेवे को परिभाषित करें।
  • inset - 3D घुमाया किनारा को परिभाषित करें।
  • outset - 3D उभरता किनारा को परिभाषित करें।
  • none - निरक्षर किनारा को परिभाषित करें।
  • hidden - छिपे हुए किनारा को परिभाषित करें।

नीचे दिए गए उदाहरण में विभिन्न outline-style मूल्य दिखाया गया है:

उदाहरण

प्रदर्शन के लिए विभिन्न प्रकार के किनारा शैली:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

परिणाम:

बिन्दु अभियोग।

गुच्छे अभियोग।

सटीक अभियोग।

दो लाइन अभियोग।

3D गोफनीय अभियोग।यह प्रभाव outline-color वैल्यू पर निर्भर करता है。

3D गोफनीय अभियोग।यह प्रभाव outline-color वैल्यू पर निर्भर करता है。

3D विकोणीय अभियोग।यह प्रभाव outline-color वैल्यू पर निर्भर करता है。

3D अध:कोणीय अभियोग।यह प्रभाव outline-color वैल्यू पर निर्भर करता है。

खुद से प्रयास करें

ध्यान दें:जब तक कि इसे सेट नहीं किया गया है outline-style अभियोग, अन्य किनारा अभियोग (अगले चैप्टर में विस्तृत रूप से वर्णित) कोई भी काम नहीं करेगा!