CSS బొర్డర్-ఇమేజ్ అట్రిబ్యూట్

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

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-