Wie kann ich nur mit CSS ein kreisförmiges Loch in einem Rechteck erstellen?

Mit CSS ein kreisförmiges Loch in eine rechteckige Form schneiden

Auf der Suche nach einem bestimmten visuellen Effekt stoßen viele Entwickler auf Herausforderungen mit Markup- und Kompatibilitätsproblemen, insbesondere beim Versuch um mit CSS einen kreisförmigen Ausschnitt innerhalb einer rechteckigen Form zu erstellen.

Um diese Bedenken auszuräumen und das Verständnis der CSS-Techniken zu verbessern, erkunden wir einen alternativen Ansatz, um das Gewünschte zu erreichen Ergebnis. Durch die Verwendung eines Hintergrunds mit radialem Farbverlauf für das übergeordnete Element und eines Pseudoelements für den kreisförmigen Ausschnitt können wir das Markup vereinfachen und das Problem der 1-Pixel-Lücke in IE 10/11 beseitigen.

div:before {
  position: absolute;
  content: "";
  width: 90px;
  height: 90px;
  top: -75px;
  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;
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Das Pseudoelement Das durch :before dargestellte Element definiert den roten kreisförmigen Ausschnitt. Es ist absolut horizontal innerhalb des übergeordneten Divs positioniert und zentriert und spiegelt das kreisförmige Loch wider, das wir erreichen möchten. Die Eigenschaften „Hintergrundfarbe“ und „Rahmenradius“ legen das visuelle Erscheinungsbild fest.

Das übergeordnete Div ist relativ positioniert, um den Ausschnitt aufzunehmen und den rechteckigen Hintergrund bereitzustellen. Der Randradius rundet seine Ecken ab und schafft so einen sanften Übergang zwischen dem Ausschnitt und dem Rechteck.

Der radial verlaufende Hintergrund auf dem übergeordneten Div ist entscheidend für die Erzielung des transparenten Lücken- und Fülleffekts. Der radiale Farbverlauf beginnt am Mittelpunkt des Kreises (50 Pixel, 50 Pixel bei 50 % – 30 Pixel) und dehnt sich nach außen aus, wodurch ein weicher Übergang von transparentem zu halbtransparentem Schwarz entsteht. Indem wir den Radius des Farbverlaufs sorgfältig anpassen, erzeugen wir die Illusion eines kreisförmigen Lochs, das in das Rechteck geschnitten ist.

Dieser Ansatz bietet ein einfacheres Markup im Vergleich zur Verwendung mehrerer Elemente und beseitigt das 1-Pixel-Lückenproblem, das in IE 10/ auftritt. 11. Es verlässt sich ausschließlich auf CSS-Eigenschaften, um den gewünschten visuellen Effekt zu erzielen und so die Wartbarkeit und browserübergreifende Kompatibilität zu verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mit CSS ein kreisförmiges Loch in einem Rechteck erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!