CSS Outline Width

CSS Outline Width பற்றி கற்றுக்கொள்ளுங்கள்

CSS Outline Width

outline-width பண்பு outline-ன் அகலத்தை குறிப்பிடுகிறது, மற்றும் பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

மதிப்பு விளக்கம் மாதிரி
thin மெல்லிய outline (பொதுவாக 1px)
1px
medium நடுத்தர outline (பொதுவாக 3px)
3px
thick தடித்த outline (பொதுவாக 5px)
5px
குறிப்பிட்ட அளவு ஒரு குறிப்பிட்ட அளவு (px, pt, cm, em, முதலியன)
8px (உதாரணம்)

💡 முக்கிய குறிப்பு:

outline-width பண்பைப் பயன்படுத்துவதற்கு முன், outline-style பண்பு அமைக்கப்பட்டிருக்க வேண்டும். outline-style இல்லாமல் outline-width வேலை செய்யாது.

CSS Outline Width எடுத்துக்காட்டுகள்

வெவ்வேறு அகலங்களைக் கொண்ட சில outlines-கள்:

thin outline

ஒரு மெல்லிய outline.

outline-width: thin;
medium outline

ஒரு நடுத்தர outline.

outline-width: medium;
thick outline

ஒரு தடித்த outline.

outline-width: thick;
8px thick outline

ஒரு 8px தடிமன் outline.

outline-width: 8px;

விரிவான எடுத்துக்காட்டு

வெவ்வேறு outline அகலங்களை நிரூபிக்கும் எடுத்துக்காட்டு:

HTML:

<p class="ex1">Thin outline</p>
<p class="ex2">Medium outline</p>
<p class="ex3">Thick outline</p>
<p class="ex4">8px outline</p>

CSS:

/* அடிப்படை பாணிகள் */
p {
  padding: 10px;
  margin: 15px 0;
  outline-style: solid;
  outline-color: green;
  background: #f8f8f8;
}

/* வெவ்வேறு outline அகலங்கள் */
p.ex1 {
  outline-width: thin;      /* 1px */
}

p.ex2 {
  outline-width: medium;    /* 3px */
}

p.ex3 {
  outline-width: thick;     /* 5px */
}

p.ex4 {
  outline-width: 8px;       /* குறிப்பிட்ட அளவு */
}

🎨 நடைமுறை பயன்பாடு:

outline-width-ஐ outline-color மற்றும் outline-style-உடன் இணைந்து பயன்படுத்துவது நல்லது. எடுத்துக்காட்டாக, முக்கியமான பொத்தான்கள் அல்லது input புலங்களை முன்னிலைப்படுத்த தடித்த outline-ஐப் பயன்படுத்தலாம்.

CSS Outline Width பயிற்சி

Jassif Team இல், உங்கள் அறிவை சோதிக்க பயிற்சிகள் உள்ளன. கீழே உள்ள பயிற்சியை முயற்சிக்கவும்:

❓ சிவப்பு, திடமான outline மற்றும் மெல்லிய அகலத்தை உருவாக்க சரியான மதிப்புகளை இழுத்து விடவும்.

p {
  border: 1px solid black;
  outline-style: ;
  outline-color: ;
  outline-width: ;
}
solid, red, 1px
✗ தவறு! 1px என்பது thin-க்கு சரியான மதிப்பு, ஆனால் thin என்று குறிப்பிடுவது நல்லது
solid, red, thin
✓ சரி! outline-style: solid, outline-color: red, outline-width: thin என்பது சரியான CSS ஆகும்
dotted, red, thin
✗ தவறு! பாணி dotted என்று உள்ளது, ஆனால் கேள்வி solid outline கேட்கிறது
solid, blue, thin
✗ தவறு! நிறம் blue என்று உள்ளது, ஆனால் கேள்வி red outline கேட்கிறது

💡 துணைக்குறிப்பு:

thin, medium, மற்றும் thick மதிப்புகள் வெவ்வேறு உலாவிகளில் சற்று மாறுபடலாம், ஆனால் பொதுவாக thin=1px, medium=3px, thick=5px ஆகும்.

உலாவி ஆதரவு

CSS outline-width பண்பு அனைத்து நவீன உலாவிகளாலும் முழுமையாக ஆதரிக்கப்படுகிறது:

உலாவி ஆதரவு குறிப்புகள்
Chrome ✓ 1.0+ முழு ஆதரவு
Firefox ✓ 1.5+ முழு ஆதரவு
Safari ✓ 1.2+ முழு ஆதரவு
Edge ✓ 12+ முழு ஆதரவு
IE ✓ 8+ IE8 முதலில் ஆதரவு

outline-width-க்கான சிறந்த நடைமுறைகள்

எப்போதும் outline-style-ஐ outline-width-க்கு முன் அமைக்கவும்
அணுகல் தன்மைக்காக, :focus நிலையில் உள்ள உறுப்புகளுக்கு outline பயன்படுத்துங்கள்
மிகவும் தடிமனான outlines-ஐ தவிர்க்கவும் (5px க்கு மேல்) - அவை பக்க தோற்றத்தை கெடுக்கலாம்
ஒரே மாதிரியான தோற்றத்திற்காக, thin/medium/thick-க்கு பதிலாக px மதிப்புகளைப் பயன்படுத்தவும்
outline-color உடன் contrast இருப்பதை உறுதிப்படுத்தவும் - குறைந்த contrast outlines பார்க்க கடினமாக இருக்கும்