CSS Outline Tutorial in Hindi – Part 10

आज इस आर्टिकल में हम आपको CSS Outline Tutorial in Hindi – Part 10 के बारे में बता रहे है.

Outline property का इस्तेमाल element के बाद और border के बाद में outer line बनाने के लिए किया जाता है. इसके कई अलग अलग property है जिसका इस्तेमाल करके हम outline बना सकते है.

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

outline-style

इसका इस्तेमाल outline के style को define करने के लिए किया जाता है. इसके अलग अलग style है जैसे हमने आपको border tutorial में बताया था.

• dotted – Dotted outline को define करने के लिए
• dashed – Dashed outline को define करने के लिए
• solid – Solid outline को define करने के लिए
• double – Double outline को define करने के लिए
• groove – 3D grooved outline को define करने के लिए
• ridge – 3D ridged outline को define करने के लिए
• inset –  3D inset outline को define करने के लिए
• outset – 3D outset outline को define करने के लिए
• none – No outline को define करने के लिए
• hidden – Hidden outline को define करने के लिए

Example

p {
outline-style: dotted;
}

outline-color

इसका इस्तेमाल outline के color को define करने के लिए किया जाता है. इसकी value में हम color name, hex value, rgb value और invert का इस्तेमाल करके हम color define कर सकते है.

Example

p {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}

outline-width

इसका इस्तेमाल outline की width सेट करने के लिए किया जाता है. इसमें हम thin, medium और thick. इसके अलावा px, pt, cm, em का इस्तेमाल करके भी हम width define कर सकते है.

p {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 5px;
}

outline-offset

इसका इस्तेमाल करके हम outline को element या border से कितना दूर रखना है इसको define कर सकते है.

Example

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

हम outline को short form में भी लिख सकते है इसके लिए हम outline property का इस्तेमाल करते है. इसका example हम आपको नीचे बता रहे है.

Example

p{
outline: 5px solid yellow;
}

CSS Text Tutorials in Hindi – Part 11>>>>>>>>>>>

इसे भी पढ़े – Xiaomi Mi 8 Full Specification & Price In India