విభిన్న రంగులతో డబుల్ బోర్డర్‌ను ఎలా జోడించాలి?
CSSని ఉపయోగించి ఏదైనా ఆకారానికి డబుల్ అంచుని జోడించడానికి, ' : ముందు ” సెలెక్టర్ ప్రసిద్ధుడు. ఇది రెండు అంచుల రంగులను ప్రత్యేకంగా మార్చడానికి వాటిని మారుస్తుంది. విభిన్న రంగులతో డబుల్ అంచుని జోడించడానికి దిగువన అందించబడిన దశల వారీ విధానం:
దశ 1: డైవ్ ఎలిమెంట్‌ని జోడించి, తరగతులను కేటాయించండి
HTML ఫైల్‌లో,
ట్యాగ్ లోపల DIV మూలకాన్ని జోడించి, “ని కేటాయించండి తరగతి '' పేరుతో రెండు-సరిహద్దు ”. వినియోగదారులు వారి స్వంత తరగతి పేరును కూడా సృష్టించవచ్చు:< div తరగతి = 'ద్వంద్వ సరిహద్దు' >
< / div >
దశ 2: స్టైల్ ట్యాగ్‌ని సృష్టించండి
ఈ దశలో, తరగతి కోసం ఒక భాగాన్ని సృష్టించండి ' రెండు-సరిహద్దు 'మరియు దానిని 'తో ఒక కాపీని చేయండి : ముందు ” సెలెక్టర్. ఈ విధంగా, CSS లక్షణాలు మా తరగతులకు వర్తించబడతాయి:
< శైలి >
.డబుల్- సరిహద్దు {
}
.డబుల్- సరిహద్దు : ముందు {
}
< / శైలి >
దశ 3: తరగతికి శైలులను జోడించండి
CSS లక్షణాలు '' తరగతిని కలిగి ఉన్న div మూలకానికి వర్తిస్తాయి రెండు-సరిహద్దు ”. కింది శైలులు క్రింద పేర్కొనబడ్డాయి:
.డబుల్- సరిహద్దు {
నేపథ్య- రంగు : #ccc;
సరిహద్దు : 4px ఘన ఆకుపచ్చ;
పాడింగ్: 50px;
వెడల్పు : 16px;
ఎత్తు : 16px;
స్థానం: బంధువు;
అంచు: 0 దానంతట అదే;
}
CSS లక్షణాల వివరణ క్రింద ఇవ్వబడింది:
- మొదట, జోడించు ' నేపథ్య రంగు 'ఇది బూడిద రంగు మరియు' సరిహద్దు ”4px బరువు మరియు ఆకుపచ్చ రంగు.
- ది ' పాడింగ్ ”అన్ని వైపుల నుండి 50px యొక్క అంతర్గత స్థలాన్ని సృష్టించడానికి 50px.
- చివరికి, ' వెడల్పు 'మరియు' ఎత్తు' 16px. అలాగే, ' మార్జిన్ ” అనేది 0 ఆటో అంటే ఎగువ మరియు దిగువ మార్జిన్‌లు సున్నా మరియు ఎడమగా ఉంటాయి.
వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
సరిహద్దు 'div'కి వర్తింపజేయబడిందని అవుట్‌పుట్ ప్రదర్శిస్తుంది.
దశ 4: CSS సెలెక్టర్‌ని జోడించడం
ఇప్పుడు, స్టైల్ ట్యాగ్‌లో '' ఉన్న రెండవ పెట్టె వైపు వెళ్లండి : ముందు ” సెలెక్టర్ జోడించబడింది మరియు క్రింది కోడ్‌ను వ్రాయండి:
.డబుల్- సరిహద్దు : ముందు {నేపథ్య : ఏదీ లేదు;
సరిహద్దు : 4px ఘన నీలం;
విషయము : '' ;
స్థానం: సంపూర్ణ;
టాప్: 4px;
ఎడమ: 4px;
కుడి: 4px;
దిగువన: 4px;
}
లక్షణాలు క్రింద వివరించబడ్డాయి:
- ఉపయోగించడానికి ' స్థానం ”ఒక మూలకం యొక్క స్థానం స్థిరంగా చేయడానికి ఆస్తి.
- ఆ తరువాత, ' ఎగువ, ఎడమ, కుడి మరియు దిగువ ”అసలైన దాని నుండి కొత్తగా సృష్టించబడిన అంశం యొక్క మార్జిన్‌ను నిర్వచిస్తుంది.
- ఒక CSS సెలెక్టర్ “: ముందు ” ఎంచుకున్న మూలకం ముందు కంటెంట్‌ని జోడిస్తుంది.
అవుట్‌పుట్ ఇలా కనిపిస్తుంది:
వివిధ రంగులను ఉపయోగించి డబుల్ బార్డర్‌ను ఎలా జోడించవచ్చు.
ముగింపు
డబుల్ అంచుని జోడించడానికి, ముందుగా div ఎలిమెంట్‌ని సృష్టించి, దానిని తరగతికి కేటాయించండి. అప్పుడు, CSSని జోడించండి ' స్థానం బంధువుకి తప్పనిసరిగా సెట్ చేయవలసిన ఆస్తి. దానిని అనుసరించి, దానికి CSS సెలెక్టర్ “:before”ని జోడించండి, తద్వారా వినియోగదారులు ఎంచుకున్న మూలకం ముందు కంటెంట్‌ని జోడించగలరు. ఈ గైడ్ వివిధ రంగులతో డబుల్ బార్డర్‌ల వినియోగాన్ని ప్రదర్శించింది.