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!
So verbergen Sie die IP-Adresse
Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
So aktivieren Sie die gleiche Stadtfunktion auf Douyin
So öffnen Sie die Download-Berechtigung von Douyin
So löschen Sie leere Seiten in Word
So übertragen Sie den Bildschirm vom Huawei-Mobiltelefon auf den Fernseher
So lösen Sie den HTTP-Status 404
So stellen Sie mit vb eine Verbindung zur Datenbank her
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
