CSS-Rahmeneigenschaft wird verwendet, um die Randeigenschaften von Elementen zu definieren. Es ist eine Abkürzung für Rahmenbreite, Rahmenstil und Rahmenfarbe. Sie können die Ränder auf jeder Seite gestalten und den Randradius festlegen.
CSS-Umrisse nehmen hingegen keinen Platz ein und erscheinen, sofern festgelegt, um einen Rahmen herum. Es unterstützt Offset. Darüber hinaus können wir nicht festlegen, ob einzelne Kanten Umrisse haben sollen.
Standardmäßig werden Rahmen und Umrisse nicht angezeigt.
Die Syntax für CSS-Rahmen- und Umrisseigenschaften lautet wie folgt –
Selector { border: /*value*/ outline: /*value*/ }
Das folgende Beispiel veranschaulicht CSS-Rahmen- und Umrisseigenschaften –
Live-Demo
<!DOCTYPE html> <html> <head> <style> div { margin: 15px; padding: 20px; width: 35%; border: thin solid green; outline-width: 5px; outline-style: ridge; outline-color: fuchsia; border-radius: 50px; } </style> </head> <body> <h2>Example</h2> <div>This is it!</div> </body> </html>
Dies ergibt die folgende Ausgabe –
Live-Demonstration
<!DOCTYPE html> <html> <head> <style> p { margin: 40px; padding: 12px; width: 30%; border: thick dashed green; outline: 5px inset; outline-color: fuchsia; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text surrounded by border and outline.</p> </body> </html>
Dies ergibt die folgende Ausgabe:
Das obige ist der detaillierte Inhalt vonErfahren Sie den Unterschied zwischen CSS-Rändern und -Konturen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!