Jassif Team Institution

CSS Rounded Corners

CSS border-radius பண்பு உறுப்புகளுக்கு வட்டமான மூலைகளை உருவாக்க பயன்படுகிறது.

CSS border-radius Property

border-radius பண்பு ஒரு உறுப்பின் மூலைகளின் ஆரத்தை வரையறுக்கிறது.

இந்த பண்பு பின்னணி நிறம், எல்லை அல்லது பின்னணி படம் கொண்ட அனைத்து உறுப்புகளுக்கும் பயன்படுத்தப்படலாம்.

இங்கே மூன்று எடுத்துக்காட்டுகள் உள்ளன:

1. பின்னணி நிறம் கொண்ட உறுப்புக்கு வட்டமான மூலைகள்:

2. எல்லை கொண்ட உறுப்புக்கு வட்டமான மூலைகள்:

3. பின்னணி படம் கொண்ட உறுப்புக்கு வட்டமான மூலைகள்:

குறியீடு:

#div1 {
    border-radius: 25px;
    background-color: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#div2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#div3 {
    border-radius: 25px;
    background-image: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS border-radius - Specify Each Corner

border-radius பண்பு ஒன்று முதல் நான்கு மதிப்புகள் வரை கொண்டிருக்கலாம். இங்கே விதிகள் உள்ளன:

நான்கு மதிப்புகள் - border-radius: 15px 50px 30px 5px; (முதல் மதிப்பு மேல்-இடது மூலையில் பொருந்தும், இரண்டாவது மதிப்பு மேல்-வலது மூலையில் பொருந்தும், மூன்றாவது மதிப்பு கீழ்-வலது மூலையில் பொருந்தும், மற்றும் நான்காவது மதிப்பு கீழ்-இடது மூலையில் பொருந்தும்):

மூன்று மதிப்புகள் - border-radius: 15px 50px 30px; (முதல் மதிப்பு மேல்-இடது மூலையில் பொருந்தும், இரண்டாவது மதிப்பு மேல்-வலது மற்றும் கீழ்-இடது மூலைகளில் பொருந்தும், மற்றும் மூன்றாவது மதிப்பு கீழ்-வலது மூலையில் பொருந்தும்):

இரண்டு மதிப்புகள் - border-radius: 15px 50px; (முதல் மதிப்பு மேல்-இடது மற்றும் கீழ்-வலது மூலைகளில் பொருந்தும், மற்றும் இரண்டாவது மதிப்பு மேல்-வலது மற்றும் கீழ்-இடது மூலைகளில் பொருந்தும்):

ஒரு மதிப்பு - border-radius: 15px; (மதிப்பு நான்கு மூலைகளுக்கும் பொருந்தும், அவை சமமாக வட்டமாக்கப்படும்):

குறியீடு:

#div1 {
    border-radius: 15px 50px 30px 5px; /* four values */
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div2 {
    border-radius: 15px 50px 30px; /* three values */
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div3 {
    border-radius: 15px 50px; /* two values */
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div4 {
    border-radius: 15px; /* one value */
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

CSS Elliptical and Circular Shapes

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

ஒரு நீள்வட்ட வடிவத்தை உருவாக்க (செவ்வக உறுப்புக்கு), அல்லது ஒரு வட்ட வடிவத்தை உருவாக்க (சதுர உறுப்புக்கு) border-radius ஐ 50% ஆக அமைக்கவும்.

எடுத்துக்காட்டு

நீள்வட்ட, நீள்வட்ட மற்றும் வட்ட வடிவங்களை உருவாக்கவும்:

#div1 {
    border-radius: 70px / 30px;
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div2 {
    border-radius: 15px / 50px;
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div3 {
    border-radius: 50%;
    background: #04AA6D;
    width: 200px;
    height: 150px;
}

#div4 {
    border-radius: 50%;
    background: #04AA6D;
    width: 200px;
    height: 200px;
}

CSS Rounded Corners பயிற்சி

உங்கள் CSS வட்டமான மூலைகள் அறிவைச் சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

CSS Rounded Corners Properties