CSS circle() फ़ंक्शन

परिभाषा और उपयोग

CSS का circle() CSS का फ़ंक्शन एक दायरे को परिभाषित करने के लिए उपयोग किया जाता है जो दायरे का दायरे और स्थान को परिभाषित करता है。

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 clip-path गुण

संदर्भःCSS शेप-आउटसाइड प्रतियोगिता

संदर्भःCSS ellipse() फ़ंक्शन

संदर्भःCSS inset() फ़ंक्शन

संदर्भःCSS polygon() फ़ंक्शन