CSS ਕਿਨਾਰਾ ਰੰਗ

CSS ਕਿਨਾਰਾ ਰੰਗ

outline-color 属性用于设置轮廓的颜色。

ਰੰਗ ਸੈਟ ਕਰਨ ਦੇ ਤਰੀਕੇ:

  • name - ਰੰਗ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ ਜਿਵੇਂ "red"
  • HEX - ਹੈਕਸਡੈਸੀਮਲ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ ਜਿਵੇਂ "#ff0000"
  • RGB - RGB ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ ਜਿਵੇਂ "rgb(255,0,0)"
  • HSL - HSL ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ ਜਿਵੇਂ "hsl(0, 100%, 50%)"
  • invert - ਰੰਗ ਉਲਟ ਕਰੋ (ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕਿਰਦ ਕਿਸੇ ਵੀ ਪਿੱਨ ਰੰਗ ਦੇ ਪਿੱਨ 'ਤੇ ਦਿਸੇ)

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੇ ਵੱਖ-ਵੱਖ ਕਿਰਦ ਸਟਾਈਲਾਂ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਧਿਆਨ ਦੇਵੋ ਕਿ ਇਹ ਤੱਤ ਕਿਰਦ ਅੰਦਰ ਕਾਲੇ ਨਿਊਨ ਬਾਰੀਕ ਬਾਰੀ ਵੀ ਹਨ:

ਲਾਲ ਦਾ ਸਰਲ ਰੰਗ ਕਿਰਦ

ਨੀਲੇ ਦਾ ਬਿੰਦੂ ਰੰਗ ਕਿਰਦ

ਗ੍ਰੇ ਦਾ ਪੁਲਾੜੀ ਕਿਰਦ ਰੰਗ

مثال

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

آپ خود سنجو

HEX ਮੁੱਲ

ਤੁਸੀਂ ਹੈਕਸਡੈਸੀਮਲ (HEX) ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ ਕਿਰਦ ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ

مثال

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

آپ خود سنجو

RGB ਮੁੱਲ

ਜਾਂ RGB ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਨਾਲ:

مثال

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

آپ خود سنجو

HSL کی مقادیر

آپ کے پاس HSL کی مقادیر بھی استعمال کی جاسکتی ہیں:

مثال

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* کالر */
}

آپ خود سنجو

آپ کے پاس CSS ਰੰਗ شعبوں میں سے ایک میں HEX، RGB اور HSL کی مقادیر کے بارے میں مزید معلومات مل سکتی ہیں۔

کالر کا معکوس

ایسا مثال استعمال کیا گیا ہے outline-color: invert، کالر کا معکوس کیا گیا ہے۔ اس طرح کا استعمال کریا جاتا ہے تاکہ کسی بھی رنگ کا پس منظر کس ہو، لائن دکھائی دیتی ہے:

کالر کا معکوس کا سودا لائن

مثال

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

آپ خود سنجو