Wie kann ich in CSS einen umgekehrten Randradius erreichen?

Inverted Border-Radius: Erkundung von CSS und nicht-nativen Lösungen

Auf der Suche nach innovativen Designs stellt sich die Frage nach der Schaffung eines „umgekehrten“. " border-radius kommt oft vor. Während der Randradius im Webdesign weit verbreitet ist, werden dabei typischerweise abgerundete Ecken auf die Innenseite eines Elements angewendet. Um jedoch den Effekt abgerundeter Ecken an der Außenseite zu erzielen, wie durch den SCHWARZEN Pfeil im bereitgestellten Bild dargestellt, sind alternative Ansätze erforderlich.

Native CSS-Einschränkungen

Der native Die CSS-Eigenschaft border-radius unterstützt keine negativen Werte, sodass es nicht möglich ist, den Effekt direkt umzukehren. Bibliotheken wie die in der Antwort des Benutzers vorgeschlagene implementieren diesen Effekt, indem sie zusätzliche HTML-Elemente erstellen, um das gewünschte Erscheinungsbild nachzuahmen.

Reiner CSS-Ansatz

Mit ausschließlich CSS ist dies möglich Erzeugen Sie die Illusion eines umgekehrten Randradius, indem Sie zusätzliche Elemente sorgfältig positionieren:

1. Definieren Sie einen Container (#main) und fügen Sie vier untergeordnete Elemente (divs) hinzu, die absolut positioniert sind.
2. Legen Sie den Hintergrund fest Farbe der untergeordneten Elemente passend zum Seitenhintergrund.
3. Positionieren Sie die untergeordneten Elemente mit negativen Rändern leicht außerhalb des Containers.
4. Wenden Sie einen Rahmenradius auf die untergeordneten Elemente an, um den gewünschten Effekt zu erzielen.

Beispiel:

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

Dieser Ansatz bietet eine reine CSS-Lösung für den invertierten Randradius und berücksichtigt gleichzeitig die Einschränkungen nativer Randradien. Radius.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen umgekehrten Randradius erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!