Wie kann ich mit CSS effizient einen Kreis aus einem Rechteck ausschneiden?

Mit CSS einen Kreis aus einer rechteckigen Form ausschneiden

Die Herausforderung, einen transparenten Kreis aus einer rechteckigen Form auszuschneiden, ist geweckt Diskussion online. Obwohl es einige Lösungen gibt, gibt es Einschränkungen und Fehler, die Benutzer dazu veranlasst haben, nach Alternativen zu suchen.

Alternativer Ansatz mit radialem Gradienten

Ein alternativer Ansatz zur ursprünglichen Lösung liegt in Verwenden eines radialen Farbverlaufs für das übergeordnete Element. Dieser Farbverlauf erzeugt die Kreisform, während ein Pseudoelement verwendet wird, um den tatsächlichen Kreis zu definieren. Dieses vereinfachte Markup macht mehrere Divs überflüssig und behebt den mit IE 10/11 verbundenen Fehler.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

Durch die Verwendung dieses radialen Verlaufsansatzes können Sie effektiv einen Kreis aus einer rechteckigen Form ausschneiden und so das vermeiden Einschränkungen früherer Lösungen und Gewährleistung der Kompatibilität zwischen verschiedenen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS effizient einen Kreis aus einem Rechteck ausschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!