Wie kann ich prozentuale Rahmen in CSS erstellen?

Wie stelle ich die Randstärke in Prozent ein?

Das Festlegen von Randbreiten in Prozent wird in CSS nicht direkt unterstützt . Sie können dieses Verhalten jedoch mit einer Kombination von CSS-Techniken simulieren.

Sie können das Element, dem Sie Rahmen hinzufügen möchten, in einen Wrapper einschließen Element mit den folgenden Eigenschaften:

• Legen Sie den Wrapper fest Stellen Sie die Hintergrundfarbe des Elements auf die gewünschte Rahmenfarbe ein.


• Legen Sie den Abstand des Wrapper-Elements in Prozent fest, um die Rahmenbreite zu simulieren.


• Legen Sie den Hintergrund fest Farbe des inneren Elements auf die gewünschte Farbe innerhalb des Rand.

Diese Technik erzeugt die Illusion von Randprozentsätzen durch die Verwendung von Füll- und Hintergrundfarben.

Beispiel Code

<br>.faux-borders {<br> Hintergrundfarbe: #f00;<br> Polsterung: 1px 25 %; /<em>Simulieren Sie einen 25 %-Rand an den Seiten </em>/<br>}</p>
<p>.content {<br>background-color: #fff;<br>}</p>
<p>&lt ;div> <div class="content"></p>
<pre class="brush:php;toolbar:false">This element has simulated percentage borders.