CSS ਕਿਰਨ

ਇਹ ਏਜੰਟ ਕਾਲੇ ਬਾਰਡਰ ਅਤੇ ਨੀਲੇ ਕਿਨਾਰੇ ਵਾਲਾ ਹੈ ਜਿਸ ਦੀ ਚੌਡਾਈ 10px ਹੈ。

CSS ਕਿਰਨ

ਕਿਨਾਰਾ ਏਜੰਟ ਦੇ ਚੁੱਕੇ ਵਿੱਚ ਬਣਾਏ ਗਏ ਇੱਕ ਲਾਈਨ ਹਨ ਜੋ ਬਾਹਰ ਬਾਰਡਰ ਦੇ ਬਾਹਰ ਹੁੰਦੇ ਹਨ ਅਤੇ ਏਜੰਟ ਨੂੰ ਉਭਾਰ ਦਿੰਦੇ ਹਨ。

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 نمائش کا نمائش، دیگر کورینس کی نمائش (جس میں آئندہ کی باب میں وضاحت کی جائیگی) کو کوئی کار نہیں آئیگا!