Jassif Team Institution

CSS Outline - சுருக்கப் பண்பு

outline பண்பு பின்வரும் தனிப்பட்ட outline பண்புகளை அமைக்க ஒரு சுருக்கப் பண்பாகும்:

மேலே உள்ள பட்டியலில் இருந்து ஒன்று, இரண்டு அல்லது மூன்று மதிப்புகளைக் குறிப்பிடலாம். மதிப்புகளின் வரிசை முக்கியமானதல்ல.

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

சுருக்க outline பண்புடன் குறிப்பிடப்பட்ட சில வெவ்வேறு outlines-கள்:

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

outline சுருக்கப் பண்பை நிரூபிக்கும் எடுத்துக்காட்டு:

<p class="ex1">Dashed outline</p>
<p class="ex2">Dotted red outline</p>
<p class="ex3">7px solid yellow outline</p>
<p class="ex4">Thick ridge pink outline</p>

/* outline சுருக்கப் பண்புடன் வெவ்வேறு பாணிகள் */
p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 7px solid yellow;}

p.ex4 {outline: thick ridge pink;}

/* அனைத்து உறுப்புகளுக்கும் பொதுவான பாணிகள் */
p {
  padding: 10px;
  margin: 15px 0;
  background: #f8f8f8;
}

CSS Outline உடன் வட்டமான மூலைகள்

Outlines-களும் வட்டமான மூலைகளைக் கொண்டிருக்கலாம்.

border-radius பண்பு ஒரு உறுப்புக்கு வட்டமான borders சேர்க்க பயன்படுகிறது.

வட்டமான மூலைகளைக் கொண்ட சில வெவ்வேறு outlines-கள்:

p.ex1 {
  outline: dashed;
  border-radius: 8px;
}

p.ex2 {
  outline: dotted red;
  border-radius: 5px;
}

p.ex3 {
  outline: 7px solid yellow;
  border-radius: 5px;
}

p.ex4 {
  outline: thick ridge pink;
  border-radius: 8px;
}

p.ex5 {
  outline: thick solid green;
  border-radius: 10px;
}

மதிப்பு வரிசை நெகிழ்வுத்தன்மை

outline சுருக்கப் பண்பில் மதிப்புகளின் வரிசை முக்கியமானதல்ல. பின்வரும் அனைத்தும் சரியானது:

/* அனைத்து வரிசைகளும் சரியானவை */
outline: 3px solid red;
outline: solid red 3px;
outline: red 3px solid;
outline: solid 3px red;
outline: 3px red solid;
outline: red solid 3px;

CSS Outline Shorthand பயிற்சி

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

உலாவி ஆதரவு

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

outline சுருக்கப் பண்புக்கான சிறந்த நடைமுறைகள்