CSS బొర్డర్-ఇమేజ్ అట్రిబ్యూట్
- ముంది పేజీ border-end-start-radius
- 下一页 border-image-outset
నిర్వచనం మరియు ఉపయోగం
border-image అట్రిబ్యూట్ ఒక సరళీకృత అట్రిబ్యూట్ ఉంది మరియు ఈ అట్రిబ్యూట్లను అనుకూలపడుతుంది:
సంకేతం లేకపోతే, అప్రమేయ విలువను అనుకూలపడుతుంది.
సలహా:బార్డర్ ఇమేజ్-* అట్రిబ్యూట్లను ఉపయోగించండి అందిన అందమైన స్క్రీన్ బటన్ను నిర్మించండి!
మరింత చూడండి:
CSS3 శిక్షణ పాఠ్యక్రమం:CSS3 బార్డర్
ఉదాహరణ
చిత్రాన్ని డివ్ ఎలమెంట్ బార్డర్ గా నిర్ణయించండి:
div { -webkit-border-image:url(border.png) 30 30 round; /* స్యాఫారీ 5 */ -o-border-image:url(border.png) 30 30 round; /* ఓపెరా */ border-image:url(border.png) 30 30 round; }
పేజీ కిందికి మరిన్ని ఉదాహరణలు ఉన్నాయి.
CSS సంకేతాలు
border-image: source slice width outset repeat|initial|inherit;
అట్రిబ్యూట్ విలువ
విలువ | వివరణ | పరీక్ష |
---|---|---|
border-image-source | బార్డర్ లో వస్తువులకు వస్తువుల మార్గం. | |
border-image-slice | చిత్ర బార్డర్ లోపలి కలిగించడం | |
border-image-width | చిత్ర బార్డర్ వెడల్పు | |
border-image-outset | బార్డర్ ఇమేజ్ ప్రాంతం బార్డర్ పైన ఎంత అనుకూలంగా ఉండాలి. | |
border-image-repeat | బార్డర్ ఇమేజ్ అంచులు అనుకూలంగా కప్పడాలి (repeated), చుట్టడానికి (rounded) లేదా విస్తరించాలి (stretched). | పరీక్ష |
సాంకేతిక వివరాలు
అప్రమేయం: | none 100% 1 0 stretch |
---|---|
పారంపర్యం: | no |
వెర్షన్: | CSS3 |
జావాస్క్రిప్ట్ సంకేతాలు: | object.style.borderImage="url(border.png) 30 30 round" |
ఇతర ఉదాహరణలు
- బార్డర్-ఇమేజ్ బటన్
- బార్డర్ ఇమేజ్ అట్రిబ్యూట్ ద్వారా బటన్ను సృష్టించడాన్ని ఈ ఉదాహరణ ప్రదర్శిస్తుంది.
బ్రౌజర్ మద్దతు
పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ని చెప్పుతాయి.
క్రోమ్ | ఐఇ / ఎజ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
---|---|---|---|---|
16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
- ముంది పేజీ border-end-start-radius
- 下一页 border-image-outset