Können CSS-Ränder in Prozent angegeben werden?

CSS-Randstärke in Prozent: Ist das möglich?

Frage:

Beim Versuch, ein Element mit Rändern zu erstellen die einen bestimmten Prozentsatz des Browserfensters abdecken, haben Sie versucht, border-width:10%; zu verwenden, aber es ist fehlgeschlagen. Gibt es eine Möglichkeit, die Rahmenstärke in CSS mithilfe von Prozentsätzen festzulegen?

Antwort:

Rand unterstützt keine Prozentsätze ... aber es ist immer noch möglich. ..

Gemäß CSS-Spezifikationen werden Prozentsätze für Rahmen nicht unterstützt widths:

border-width

Value

Prozentsätze

Grenze- top-width

`

inherit`

border-width	Value	Percentages
border-top-width	`	inherit`	N/A

N/A

Ohne Skript Lösung:

Da CSS-Rahmen keine Prozentsätze unterstützen, erwägen Sie die Verwendung eines Wrapper-Elements, um Ränder zu simulieren:

1. Stellen Sie die Hintergrundfarbe des Wrappers auf die gewünschte Rahmenfarbe ein.
2. Verwenden Sie die Auffüllung mit Prozentsätzen für das Wrapper-Element anstelle der Randbreite.
3. Legen Sie fest Ändern Sie die Hintergrundfarbe des Elements in die gewünschte Inhaltsfarbe.

Diese Technik simuliert prozentuale Ränder mithilfe von Auffüllung.

Beispiel:

Um 25 zu erstellen % Breite der Seitenränder mithilfe dieser Funktion Ansatz:

HTML:

<div class="faux-borders">
  <div class="content">
    This is the element to have percentage borders.
  </div>
</div>

CSS:

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

Das obige ist der detaillierte Inhalt vonKönnen CSS-Ränder in Prozent angegeben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!