Wie erstelle ich den Effekt „Invertierter Randradius' in CSS?

So erzielen Sie einen umgekehrten „Randradius“-Effekt

Beim Entwerfen einer modernen Website kann das Hinzufügen von Stilelementen wie Registerkarten oder Navigationsleisten zur Verbesserung beitragen die Benutzererfahrung. Ein gewünschter Effekt besteht darin, Registerkarten mit einem „umgekehrten Rahmenradius“ zu erstellen, bei dem die Ecken in eine Richtung abgerundet werden, die nach außen statt nach innen zeigt.

Da die native Eigenschaft „Rahmenradius“ von CSS keine negativen Werte unterstützt, Um diesen Effekt zu erzielen, ist ein anderer Ansatz erforderlich. Eine Lösung besteht darin, zusätzliche Elemente innerhalb des Tab-Containers zu verwenden, die strategisch außerhalb des eigentlichen Tabs positioniert sind. Diese Elemente sollten eine Hintergrundfarbe haben, die zum Seitenhintergrund passt, sodass sie praktisch nicht sichtbar sind. Wenn Sie dann einen Randradius auf diese Elemente anwenden, entsteht die Illusion einer umgekehrten abgerundeten Ecke.

Hier ist ein Beispiel mit reinem CSS:

<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>

<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>

Dieser Ansatz erzeugt eine umgekehrte „ „Border-Radius“-Effekt, indem die abgerundeten Ecken effektiv über die Tab-Grenze hinaus verlängert werden. Es ist eine einfache und effektive Möglichkeit, den gewünschten visuellen Stil zu erreichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich den Effekt „Invertierter Randradius' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!