CSS எல்லை அகலம்
border-width பண்பு நான்கு எல்லைகளின் அகலத்தைக் குறிப்பிடுகிறது.
அகலத்தை ஒரு குறிப்பிட்ட அளவாக (px, pt, cm, em, போன்றவற்றில்) அல்லது மூன்று முன்னரே வரையறுக்கப்பட்ட மதிப்புகளில் ஒன்றைப் பயன்படுத்தி அமைக்கலாம்: thin, medium, அல்லது thick:
நினைவில் கொள்ளுங்கள்:
border-width பண்பு வேலை செய்ய, நீங்கள் முதலில் border-style பண்பை அமைக்க வேண்டும். எல்லை பாணி அமைக்கப்படாத வரை, எல்லை அகலம் காண்பிக்கப்படாது.
எடுத்துக்காட்டு
வெவ்வேறு எல்லை அகலங்களின் ஆர்ப்பாட்டம்:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}முடிவு:
குறிப்பிட்ட பக்க அகலங்கள்
border-width பண்பு ஒன்று முதல் நான்கு வரை மதிப்புகளைக் கொண்டிருக்கலாம் (மேல் எல்லை, வலது எல்லை, கீழ் எல்லை மற்றும் இடது எல்லைக்கு):
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px மேலும் கீழும், 20px பக்கங்களில் */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px மேலும் கீழும், 5px பக்கங்களில் */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px மேல், 10px வலது, 4px கீழ் மற்றும் 35px இடது */
}மதிப்பு வரிசை முறை:
நான்கு மதிப்புகளைப் பயன்படுத்தும் போது:
- முதல் மதிப்பு: மேல் எல்லை
- இரண்டாவது மதிப்பு: வலது எல்லை
- மூன்றாவது மதிப்பு: கீழ் எல்லை
- நான்காவது மதிப்பு: இடது எல்லை
முடிவு:
குறிப்பு:
இரண்டு மதிப்புகளைப் பயன்படுத்தும் போது: முதல் மதிப்பு மேல் மற்றும் கீழ் எல்லைகளுக்கும், இரண்டாவது மதிப்பு வலது மற்றும் இடது எல்லைகளுக்கும் பயன்படுத்தப்படுகிறது.
அளவீட்டு அலகுகள்
border-width பண்பு பின்வரும் அலகுகளை ஏற்கிறது:
| அலகு | விளக்கம் | எடுத்துக்காட்டு |
|---|---|---|
px |
பிக்சல்கள் | border-width: 5px; |
em |
தற்போதைய எழுத்துரு அளவைப் பொறுத்து | border-width: 2em; |
rem |
ரூட் எழுத்துரு அளவைப் பொறுத்து | border-width: 1.5rem; |
pt |
புள்ளிகள் (1pt = 1/72 அங்குலம்) | border-width: 3pt; |
cm |
சென்டிமீட்டர்கள் | border-width: 0.5cm; |
mm |
மில்லிமீட்டர்கள் | border-width: 10mm; |
in |
அங்குலங்கள் | border-width: 0.2in; |