Mwongozo wa kurahisisha:

Funktion ya CSS circle()

Muhtasari na kutumia circle() Kuhakikisha ya CSS

circle() Funzioni inatumika kwa kuhakikisha kuwa kina ina urefu na eneo. clip-path Mashairi na shape-outside Kutumia pamoja ya mashairi

Mfano

Mfano 1

Kuhifadhi picha kama kikuruki na radius ya 50%:

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

Tenda kwa mafanikio

Mfano 2

Kuhifadhi picha kama kikuruki na radius ya 50% na kuingia katika eneo kikuu:

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

Tenda kwa mafanikio

Mfano 3

Kutumia clip-path na circle() Kupiga uharibifu:

#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%);}
}

Tenda kwa mafanikio

Mfano 4

kutumia pamoja circle(),clip-path na shape-outside:

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

Tenda kwa mafanikio

Inasababisha ya CSS

circle(radius katika eneo)

Mafuriko ya teknolojia

Muhimu wa vifaa vya kusoma

Mashabara za vifaa vya programu ya mtumiaji inayohesabika kama msingi wa siku za kuanzisha kwa funtion hii.

Paeja za muhtasari

Tazama:Mfano wa CSS clip-path

Tazama:Mwongozo wa CSS shape-outside

Tazama:Funktion ya CSS ellipse()

Tazama:Mfano wa inset() wa kifupi cha CSS

Tazama:Mfano wa polygon() wa kifupi cha CSS