இணையதளத்தை வடிவமைக்கும் போது, வட்டங்களுக்குப் பதிலாக அரை வட்டங்களைச் சேர்ப்பது சிறந்த தோற்றத்தைக் கொடுக்கும். மேலும், அரை வட்டங்களை உருவாக்குவது எளிதானது மற்றும் சுவாரஸ்யமானது.
இந்த கட்டுரையில், CSS ஐப் பயன்படுத்தி ஒரு அரை வட்டத்தை எவ்வாறு உருவாக்குவது என்பது குறித்த வழிகாட்டியை வழங்குவோம்.
CSS மூலம் அரை வட்டத்தை உருவாக்குவது எப்படி?
ஒரு அரை வட்டத்தை உருவாக்க, நாங்கள் பயன்படுத்துவோம் ' எல்லை-ஆரம் ”சொத்து. இந்த சொத்து பின்வரும் வழிகளில் ஒரு அரை வட்டத்தை உருவாக்க உதவும்:
- மேலிருந்து அரை வட்டம்
- கீழே இருந்து அரை வட்டம்
- இடமிருந்து அரை வட்டம்
- வலதுபுறத்தில் இருந்து அரை வட்டம்
ஒவ்வொன்றாக விரிவாகப் பார்ப்போம்!
எடுத்துக்காட்டு 1: CSS உடன் மேலிருந்து ஒரு அரை வட்டத்தை உருவாக்கவும்
மேலே இருந்து ஒரு அரை வட்டத்தை உருவாக்க, முதலில், ' HTML இப்போது, divக்கு பொருத்தமான பரிமாணங்களை அமைக்கவும், அதாவது ' அகலம் 'சொத்து மதிப்பு' 180px 'மற்றும்' உயரம் 'மதிப்பு கொண்ட சொத்து' 90px ”. அடுத்த கட்டத்தில், ' எல்லை-ஆரம் 'சொத்து மதிப்பு' 12rem 12rem 0 0 ”; இதில் முதல் இலக்கமான 12rem, div இன் மேல் இடது பக்கத்தை டிரிம் செய்யும், இரண்டாவது 12rem மேல் வலது பக்கத்தை டிரிம் செய்யும், மூன்றாவது மற்றும் நான்காவது இலக்கம் 0 ஆனது div இன் முழு-கீழ் பகுதியையும் வெட்டிவிடும். கடைசியாக, வட்டத்திற்கு ஒரு வண்ணத்தை கொடுக்க, பயன்படுத்தவும் பின்னணி நிறம் 'மதிப்பு கொண்ட சொத்து' ஊதா ”. CSS குறிப்பிட்ட குறியீட்டுடன் HTML கோப்பைச் சேமித்து உங்கள் உலாவியில் திறக்கவும்: நீங்கள் பார்க்கிறபடி, CSS பார்டர்-ரேடியஸ் சொத்துடன் ஒரு அரை வட்டத்தை வெற்றிகரமாக உருவாக்கியுள்ளோம். கீழே இருந்து ஒரு அரை வட்டத்தை உருவாக்க, எல்லை-ஆரம் சொத்து மதிப்புகளை இவ்வாறு அமைப்போம் ' 0 0 12rem 12rem ”, முதல் இரண்டு மதிப்புகள் மேல் இடது மற்றும் மேல் வலது பக்க எல்லை-ஆரம் ஆகியவற்றைக் குறிக்கும். div இன் மேல் பாதியை முழுமையாக மறையச் செய்ய, அவற்றை 0 என அமைத்துள்ளோம். கீழே, மதிப்புகளை 12rem என அமைப்பதன் மூலம், கீழே இடது மற்றும் கீழ் வலது பக்கத்தை மட்டும் சிறிது டிரிம் செய்துள்ளோம். CSS வெளியீடு CSS அரை வட்டத்தை வலதுபுறமாக உருவாக்க, முதலில், வட்டத்தின் சரியான வடிவத்தைப் பெறுவது அவசியம் என்பதால், கொள்கலனின் உயரம் மற்றும் அகலத்தை சரிசெய்யவும். அமைக்க ' அகலம் 'என' 90px 'மற்றும்' உயரம் 'என' 180px ” இந்த முறை. மீண்டும், எல்லை-ஆரம் சொத்தை மதிப்புடன் பயன்படுத்தவும் ' 0 12rem 12rem 0 ”, முதல் மதிப்பு 0 என்பது மேல் இடது பக்கமாகவும், கடைசி மதிப்பு 0 கீழ் இடது பக்கமாகவும் இருக்கும், மேலும் இரண்டாவது மற்றும் மூன்றாவது மதிப்புகள் மேல் வலது மற்றும் கீழ் வலது பக்கத்தை ஒழுங்கமைக்க சேர்க்கப்படும். இந்த மதிப்புகளைப் பயன்படுத்தினால், வலதுபுறத்தில் இருந்து அரை வட்டம் உருவாகும். CSS வெளியீடு இந்த நேரத்தில், எல்லை-ஆரம் சொத்தை மதிப்புடன் குறிப்பிடவும் ' 12rem 0 0 12rem ”; முதல் மற்றும் கடைசி மதிப்பு 12rem, div இன் மேல் இடது மற்றும் கீழ் இடது பக்கத்தை டிரிம் செய்யும், இரண்டாவது மற்றும் மூன்றாவது மதிப்பை 0 ஆக அமைப்பது வட்டத்தின் மேல் வலது மற்றும் கீழ் வலது பக்கத்தை தெளிவாக்கும். இறுதியில், நமது இடது பக்க அரை வட்டம் உருவாக்கப்படும். CSS வெளியீடு CSS உடன் அரை வட்டத்தை உருவாக்க பல்வேறு முறைகளை வழங்கியுள்ளோம். ஒரு அரை வட்டத்தை உருவாக்க, நாம் CSS ஐப் பயன்படுத்தலாம். எல்லை-ஆரம் ”சொத்து. அரை வட்டத்தை இடது, வலது, மேல் மற்றும் கீழ் என பக்கத்திலிருந்து பக்கமாக உருவாக்கலாம். எல்லை-ஆரம் பண்புகளில், ஆரம்ப மதிப்பு மேல் இடதுபுறம், இரண்டாவது மேல் வலதுபுறம், மூன்றாவது கீழ் வலதுபுறம் மற்றும் நான்காவது மதிப்பு கீழ் இடதுபுறம். CSS மூலம் அரை வட்டத்தை எவ்வாறு உருவாக்குவது என்பதை இந்த பதிவு விளக்கியுள்ளது.
அகலம் : 180px ;
உயரம் : 90px ;
எல்லை-ஆரம் : 12ரெம் 12ரெம் 0 0 ;
பின்னணி நிறம் : ஊதா ;
}
எடுத்துக்காட்டு 2: CSS மூலம் கீழே இருந்து ஒரு அரை வட்டத்தை உருவாக்கவும்
அகலம் : 180px ;
உயரம் : 90px ;
எல்லை-ஆரம் : 0 0 12ரெம் 12ரெம் ;
பின்னணி நிறம் : ஊதா ;
}
எடுத்துக்காட்டு 3: CSS மூலம் வலமிருந்து ஒரு அரை வட்டத்தை உருவாக்கவும்
அகலம் : 90px ;
உயரம் : 180px ;
எல்லை-ஆரம் : 0 12ரெம் 12ரெம் 0 ;
பின்னணி நிறம் : ஊதா ;
}
எடுத்துக்காட்டு 4: CSS உடன் இடமிருந்து ஒரு அரை வட்டத்தை உருவாக்கவும்
அகலம் : 90px ;
உயரம் : 180px ;
எல்லை-ஆரம் : 12ரெம் 0 0 12ரெம் ;
பின்னணி நிறம் : ஊதா ;
}
முடிவுரை