CSS క్లిప్ పాత్తర్ అట్రిబ్యూట్

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

clip-path లక్షణం మీరు వస్తువును ప్రాథమిక రూపంగా లేదా SVG మూలంగా క్లిప్ చేయడానికి అనుమతిస్తుంది.

ప్రకటన:clip-path అనేది తొలగించబడిన clip లక్షణాన్ని పునఃస్థాపిస్తుంది.

ఉదాహరణ

చిత్రాన్ని 50% చక్రంగా క్లిప్ చేయండి:

img {
  clip-path: circle(50%);
}

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

CSS సంకేతాలు

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

లక్షణ విలువ

విలువ వివరణ
clip-source SVG <clipPath> వస్తువుకు దిశానిర్దేశం చేసే URL ను నిర్వచించండి.
basic-shape వస్తువును ప్రాథమిక రూపంగా క్లిప్ చేయండి: చక్రం, కర్ణాకారం, పలకం లేదా స్టార్.
margin-box మార్జిన్ బాక్స్ ను పేర్కొని వాడండి.
border-box బార్డర్ బాక్స్ ను పేర్కొని వాడండి.
padding-box ప్యాడింగ్ బాక్స్ ను పేర్కొని వాడండి.
content-box కంటెంట్ బాక్స్ ను పేర్కొని వాడండి.
fill-box వస్తువు బౌండింగ్ బాక్స్ ను పేర్కొని వాడండి.
stroke-box కాంట్రేక్ట్ బౌండింగ్ బాక్స్ ను పేర్కొని వాడండి.
view-box SVG వీక్షణ ప్రాంతాన్ని పేర్కొని వాడండి.
none అప్రమేయ విలువ. క్లిప్ పాత్ ను సృష్టించబడదు.

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

అప్రమేయ విలువ: none
పారంపర్యం కలిగించండి: సంఖ్యాత్మకంగా లేదు
అనిమేషన్ తయారీ: మద్దతు (మాత్రమే basic-shape విలువలపై). చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
సంస్కరణ: CSS మాస్కింగ్ మొడ్యూల్ లెవల్ 1
JavaScript సంకేతాలు: object.style.clipPath="circle(50%)"

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

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

Chrome IE / Edge Firefox Safari Opera
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge లోను మాత్రమే SVG మెలకుటలపై క్లిప్-పాత్ ను మద్దతు ఇస్తుంది (HTML మెలకుటలపై మద్దతు లేదు).