CSS circle() ఫంక్షన్

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

CSS యొక్క circle() ఫంక్షన్లు వాస్తవానికి విస్తరణ దూరం మరియు స్థానాన్ని నిర్వహించడానికి ఉపయోగించబడతాయి.

circle() ఫంక్షన్లు సాధారణంగా clip-path అనునాయకాలు మరియు shape-outside అనునాయకాలను కలిసి ఉపయోగించండి.

ఉదాహరణ

ఉదాహరణ 1

చిత్రాన్ని వ్యాసాన్ని 50% వరకు చివరి పక్కన స్థానంలో కాపీ చేయండి:

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

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

ఉదాహరణ 2

చిత్రాన్ని వ్యాసాన్ని 50% వరకు చివరి పక్కన స్థానంలో కాపీ చేయండి:

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

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

ఉదాహరణ 3

ఉపయోగించండి clip-path మరియు circle() అనిమేషన్ ప్రభావం అమలు చేయండి:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

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

ఉదాహరణ 4

కలిసి ఉపయోగించండి circle()మరియుclip-path మరియు shape-outside:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

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

CSS సంకేతాలు

circle(radius పోసిషన్ వద్ద)

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

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

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

సంబంధిత పేజీలు

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

参考：CSS షేప్-ఆఉట్ అట్రిబ్యూట్

参考：CSS ellipse() ఫంక్షన్

参考：CSS inset() 函数

参考：CSS polygon() 函数