Jassif Team Institution

CSS Outline

Outline என்பது ஒரு உறுப்புக்கு சுற்றி வரையப்படும் ஒரு கோடு, அதன் border-க்கு வெளியே.

/* இந்த உறுப்புக்கு கருப்பு border மற்றும் 10px அகலமுள்ள பச்சை outline உள்ளது */

CSS Outline என்றால் என்ன?

Outline என்பது உறுப்புகளைச் சுற்றி வரையப்படும் ஒரு கோடு, border-க்கு வெளியே, உறுப்பை "முன்னிறுத்த" உதவுகிறது.

/* உதாரணம்: Border மற்றும் Outline இடையே உள்ள வித்தியாசம் */
.element {
    width: 150px;
    height: 100px;
    border: 3px solid #673AB7;      /* Border - உறுப்பின் பரிமாணத்தின் பகுதி */
    outline: 4px dotted #E91E63;   /* Outline - border-க்கு வெளியே, பரிமாணத்தை பாதிக்காது */
    background: #9C27B0;
    margin: 20px;
}

CSS Outline பண்புகள்

CSS-ல் பின்வரும் outline பண்புகள் உள்ளன:

CSS outline-style பண்பு

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

/* புள்ளியிட்ட outline வரையறுக்கிறது */
p.dotted {outline-style: dotted;}

/* துண்டு துண்டாக outline வரையறுக்கிறது */
p.dashed {outline-style: dashed;}

/* திடமான outline வரையறுக்கிறது */
p.solid {outline-style: solid;}

/* இரட்டை outline வரையறுக்கிறது */
p.double {outline-style: double;}

/* 3D குழிவான outline வரையறுக்கிறது */
p.groove {outline-style: groove;}

/* 3D மேடு outline வரையறுக்கிறது */
p.ridge {outline-style: ridge;}

/* 3D உள்தள்ளப்பட்ட outline வரையறுக்கிறது */
p.inset {outline-style: inset;}

/* 3D வெளித்தள்ளப்பட்ட outline வரையறுக்கிறது */
p.outset {outline-style: outset;}

/* outline இல்லை என வரையறுக்கிறது */
p.none {outline-style: none;}

/* மறைக்கப்பட்ட outline வரையறுக்கிறது */
p.hidden {outline-style: hidden;}

Outline பாணிகளின் மாதிரி

வெவ்வேறு outline-style மதிப்புகளின் நடைமுறை உதாரணங்கள்:

3D outline விளைவுகள்: groove, ridge, inset மற்றும் outset பாணிகளின் விளைவுகள் outline-color மதிப்பைப் பொறுத்தது.

CSS Outline பயிற்சி

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

p.dotted {
  : ;
}

சிறந்த நடைமுறைகள்

CSS Outline-ஐ பயன்படுத்தும் போது பின்பற்ற வேண்டிய சில முக்கியமான குறிப்புகள்:

உங்கள் முன்னேற்றத்தைக் கண்காணிக்கவும்

ஒரு Jassif Team கணக்கை உருவாக்கி மேலும் அம்சங்கள் மற்றும் கற்றல் பொருட்களுக்கு அணுகலைப் பெறுங்கள்: