CSS 边框图像

CSS 边框图像

CSS ఉపయోగించి border-image అట్రిబ్యూట్, చిత్రాన్ని సెల్ఫ్ బార్డర్ చుట్టూ ఉపయోగించడానికి అనుమతిస్తుంది.

CSS border-image అట్రిబ్యూట్

CSS border-image అట్రిబ్యూట్ మీరు సాధారణ బార్డర్ చుట్టూ ఉండే చిత్రాన్ని ఉపయోగించడానికి అనుమతిస్తుంది.

ఈ అట్రిబ్యూట్ మూడు భాగాలు ఉన్నాయి:

  • బార్డర్ గా ఉపయోగించబడే చిత్రం
  • చిత్రాన్ని ఎక్కడ కట్ చేయాలి
  • మధ్యభాగం పునరావృతం అనికి లేదా పొడిగించాలి నిర్వచించబడింది

మేము ఈ చిత్రాన్ని ("border.png") ఉపయోగించాలి

border-image అట్రిబ్యూట్ చిత్రాన్ని అంగీకరించి, అది నాలుగు భాగాలుగా కట్ అవుతుంది, ఇది కాంట్రాస్ గేమ్ బ్యాడ్ లో అనివార్యం. కానీ, మీ అమరణాల ప్రకారం, మధ్యభాగం నుండి పునరావృతం చేయవచ్చు లేదా పొడిగించవచ్చు.

మీరు గమనించాలి:ఈ కెల్లంత అంశాన్ని సెట్ చేయడానికి border-image ప్రభావితం అవుతుంది, ఈ కెల్లంత అంశాన్ని సెట్ చేయాలి border అట్రిబ్యూట్!

ఇక్కడ, చిత్రం మధ్యభాగం బార్డర్ రూపంగా పునరావృతం చేయబడుతుంది:

చిత్రం బార్డర్ గా ఉపయోగించబడుతుంది!

ఇది కోడ్ ఉంది:

ఉదాహరణ

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

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

ఇక్కడ, చిత్రం మధ్యభాగం బార్డర్ రూపంగా పొడిగించబడుతుంది:

చిత్రం బార్డర్ గా ఉపయోగించబడుతుంది!

ఇది కోడ్ ఉంది:

ఉదాహరణ

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

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

అనురూపం:border-image అట్రిబ్యూట్ అసలుగా ఈ అట్రిబ్యూట్లకు సరళ స్వరూపంలో ఉంది:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - వివిధ కట్ విలువలు

వివిధ కట్ విలువలు బార్డర్ యొక్క రూపాన్ని పూర్తిగా మారుస్తాయి:

ఉదాహరణ 1:

border-image: url(border.png) 50 round;

ఉదాహరణ 2:

border-image: url(border.png) 20% round;

ఉదాహరణ 3:

border-image: url(border.png) 30% round;

ఇది కోడ్ ఉంది:

ఉదాహరణ

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

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

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

అట్రిబ్యూట్ వివరణ
border-image అన్ని border-image-* అట్రిబ్యూట్లకు సరళ స్వరూపంలో ఉపయోగించబడుతుంది。
border-image-source బార్డర్ ఇమేజ్ యొక్క మార్గం నిర్వచించబడింది。
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat బార్డర్ ఇమేజ్‌ను పునరావృతం చేయాలా, కాంకరాలు చేయాలా లేదా క్రియాశీలంగా చేయాలా నిర్ధారిస్తుంది.