ఈ మాన్యువల్ యొక్క ఉద్దేశ్యం రౌండ్ కార్నర్ సరిహద్దులను ఎలా సృష్టించాలో వివరించడం. దీని కోసం, ముందుగా మనం తెలుసుకోవాలి ' సరిహద్దు ”ఆస్తి. కాబట్టి, ప్రారంభిద్దాం!
CSSలో 'సరిహద్దు' ఆస్తి అంటే ఏమిటి?
మూలకం చుట్టూ అంచుని సృష్టించడానికి, మీరు ''ని ఉపయోగించాలి సరిహద్దు ”ఆస్తి. ఈ ఆస్తిని ఉపయోగించడం ద్వారా, మీరు ' శైలి ',' రంగు ', మరియు' వెడల్పు ”సరిహద్దు.
వాక్యనిర్మాణం
సరిహద్దు ఆస్తి యొక్క వాక్యనిర్మాణం ఇలా ఇవ్వబడింది:
సరిహద్దు : వెడల్పు శైలి రంగు
పైన ఇచ్చిన విలువల వివరణ ఇక్కడ ఉంది:
- వెడల్పు: ఇది సరిహద్దు యొక్క వెడల్పును సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- శైలి: ఇది చుక్కల, గీతలు, ఘనమైన లేదా డబుల్ వంటి అంచు శైలిని సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- రంగు: ఇది సరిహద్దు రంగును నిర్ణయిస్తుంది.
మేము అమలు చేసే ఉదాహరణ ఇక్కడ ఉంది ' సరిహద్దు ”ఆస్తి.
CSSని ఉపయోగించి సరిహద్దును ఎలా సృష్టించాలి?
అంచుని సృష్టించడానికి, ముందుగా, HTML ఫైల్‌లో ఒక మూలకాన్ని జోడించండి. అలా చేయడానికి, మేము
మరియు
ట్యాగ్‌లను ఉపయోగించి శీర్షిక మరియు పేరాను జోడిస్తాము:
< శరీరం >
< div తరగతి = 'మూల' >
< h1 > Linux సూచన < / h1 >
< p > CSSలో రౌండ్ మూలలు < / p >
< / div >
< / శరీరం >
తరువాత, మేము CSS విభాగానికి వెళ్తాము.
ఇక్కడ, ' .మూలలో ”
.మూలలో {
సరిహద్దు : 4px ఘనమైన rgb ( 248 , 6 , 107 ) ;
వెడల్పు : 250px ;
ఎత్తు : 150px ;
నేపథ్య రంగు : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
మీరు పైన పేర్కొన్న కోడ్‌ని అమలు చేసిన తర్వాత, HTML ఫైల్‌కి వెళ్లి దాన్ని అమలు చేయండి. మీరు ఈ క్రింది ఫలితాన్ని చూస్తారు:
ఇప్పుడు, మేము తదుపరి భాగానికి వెళ్తాము, ఇక్కడ మేము రౌండ్ కార్నర్ సరిహద్దుకు చదరపు సరిహద్దుని సృష్టిస్తాము.
CSSని ఉపయోగించి కార్నర్ రౌండ్ చేయడం ఎలా?
రౌండ్ కార్నర్ అంచుని సృష్టించడానికి, ' సరిహద్దు-వ్యాసార్థం ” ఆస్తి ఉపయోగించబడుతోంది, దీనిలో మీరు మీ ప్రాధాన్యతల ప్రకారం మూలలోని వ్యాసార్థాన్ని సెట్ చేయవచ్చు.
వాక్యనిర్మాణం
సరిహద్దు-వ్యాసార్థం ఆస్తి యొక్క వాక్యనిర్మాణం క్రింద ఇవ్వబడింది:
సరిహద్దు-వ్యాసార్థం : విలువమునుపటి ఉదాహరణను కొనసాగిద్దాం మరియు రౌండ్ మూలలను సాధించడానికి సరిహద్దు-వ్యాసార్థాన్ని సెట్ చేద్దాం.
ఉదాహరణ
లో ' .మూలలో 'CSS ఫైల్ యొక్క తరగతి, ' విలువను సెట్ చేయండి సరిహద్దు-వ్యాసార్థం 'ఆస్తి' 30px ”:
సరిహద్దు-వ్యాసార్థం : 30px ;పై లైన్ జోడించబడితే, మీరు క్రింది అవుట్‌పుట్ పొందుతారు:
సరిహద్దు-వ్యాసార్థం ప్రాపర్టీ కారణంగా సరిహద్దులు విజయవంతంగా రౌండ్ కార్నర్‌లుగా మార్చబడుతున్నాయని పైన-ఇచ్చిన అవుట్‌పుట్ సూచిస్తుంది.
ముగింపు
CSS లో ' సరిహద్దు-వ్యాసార్థం ”ఆస్తి సరిహద్దుల మూలను మార్చడానికి ఉపయోగించబడుతుంది. వ్యాసార్థం యొక్క ఇచ్చిన విలువ ప్రకారం వక్రరేఖ యొక్క ఆకారం మారుతుంది. పేర్కొన్న ఆస్తిని ఉపయోగించి, మీరు మీ ఎంపిక ప్రకారం మూలలోని వ్యాసార్థాన్ని సెట్ చేయవచ్చు. ఈ వ్యాసంలో, మేము ఒక ఉదాహరణ సహాయంతో సరిహద్దు-వ్యాసార్థం ప్రాపర్టీని ఉపయోగించి మూలల సరిహద్దులను ఎలా రౌండ్ చేయాలో వివరించాము.