DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft shape-margin fügt Ränder zu CSS-Formen hinzu, die mit der shape-outside -Eigenschaft erstellt werden.
Sie verhält sich irgendwie wie shape-image-threshold , da sie den Abstand zwischen der CSS-Form und dem umgebenden Inhalt ändert. Anstatt jedoch mit Opazitätswerten zu arbeiten, um halbtransparente Pixel im schwebenden Bereich einzuschließen, definiert shape-margin – getreu seinem Namen – den Raum zwischen dem schwebenden Bereich der CSS-Form und dem Inhalt, der sie umgibt.
shape-margin wird nicht allein verwendet, sondern arbeitet mit shape-outside zusammen, um einen definierten CSS-Rand hinzuzufügen, der den schwebenden Bereich festlegt.
Syntax
shape-margin: <length> | <percentage>- Anfangswert:
0 - Gilt für: Floats
- Vererbt: nein
- Animationstyp: eine Länge, ein Prozentsatz oder eine Berechnung
Werte
Die Eigenschaft shape-margin akzeptiert Werte, die eine numerische Länge, einen Prozentsatz oder einen berechneten Wert mithilfe der Funktion calc() enthalten.
/* Length values */
shape-margin: 25px;
shape-margin: 2.5em;
/* Percentage values */
shape-margin: 25%;
/* Calculated values */
shape-margin: calc(100% - 2vw);
/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;Beachten Sie, dass sich Prozentsatzwerte auf die Breite des Elements beziehen, das das Element enthält, das die Eigenschaft deklariert.
Demo
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nein | 79+ | 62+ | 37+ | 10.1+ | 24+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 84+ | 68+ | 81+ | 10.3 | Alle |