CSS బాక్స్ శాడో అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

box-shadow లక్షణం బాక్స్ కు ఒకటి లేదా కన్నా ఎక్కువ శాడోలను జోడిస్తుంది.

సలహా:బార్డర్ ఇమేజ్-* లక్షణాన్ని వినియోగించి అందమైన స్క్రీన్ బటన్లను నిర్మించండి!

ఇతర పరిశీలనలు:

CSS3 శిక్షణ పత్రం:CSS3 బార్డర్

HTML DOM పరిశీలన పత్రం:boxShadow లక్షణం

ఉదాహరణ

డివ్ ఎలిమెంట్ కు box-shadow జోడించడం చేయండి:

div
{
box-shadow: 10px 10px 5px #888888;
}

స్వయంగా ప్రయత్నించండి

పేజీ కిందికి మరిన్ని ఉదాహరణలు ఉన్నాయి.

CSS సంకేతాలు

box-shadow: h-shadow v-shadow blur spread color inset;

ప్రకటన:box-shadow బాక్స్ కు ఒకటి లేదా కన్నా ఎక్కువ శాడోలను జోడిస్తుంది. ఈ లక్షణం కాండిషన్ జాబితాలను కొలపడం ద్వారా నిర్వహించబడుతుంది, ప్రతి శాడో ను 2-4 పరిమాణ విలువలు, ఎంపికలు రంగు విలువలు మరియు ఎంపికలు inset కీలక పదాన్ని ఉంచుతుంది. పరిమాణం విలువలు సంపూర్ణంగా ఉండవచ్చు. సంపూర్ణంగా ఉండని పరిమాణం విలువలు 0 విలువను సూచిస్తాయి.

లక్షణ విలువ

విలువ వివరణ పరీక్ష
h-shadow అవసరం. అడుగున శాడో స్థానం. ప్రత్యక్ష విలువలు అనుమతిస్తాయి. పరీక్ష
v-shadow అవసరం. ఉన్నతి శాడో స్థానం. ప్రత్యక్ష విలువలు అనుమతిస్తాయి. పరీక్ష
blur ఎంపికలు. మేఘము దూరం. పరీక్ష
spread ఎంపికలు. శాడో పరిమాణం. పరీక్ష
color ఎంపికలు. శాడో రంగు. చూడండి CSS రంగు విలువలు. పరీక్ష
inset ఎంపికలు. బాహ్య శాడో (outset) ను లోపలి శాడో (inset) గా మార్చండి. పరీక్ష

సాంకేతిక వివరాలు

అప్రమేయం: none
పారమీతికత: no
సంచిక: CSS3
JavaScript సంకేతాలు: object.style.boxShadow="10px 10px 5px #888888"

ఇతర ఉదాహరణలు

టేబుల్ మీద ఉన్న చిత్రం
ఈ ఉదాహరణలో, ‘పోలారోయిడ్’ చిత్రాన్ని సృష్టించడం మరియు చిత్రాన్ని చుట్టిపెట్టడం చూపబడింది.

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే ప్రథమ బ్రౌజర్ సంచికను పేర్కొంది.

బిగింగిన -webkit- లేదా -moz- సంఖ్యలు ప్రాధమిక సంచికను వినియోగించడానికి ఉపయోగిస్తాయి.

క్రోమ్ IE / ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5