Heim > Artikel > Web-Frontend > Erfahren Sie den Unterschied zwischen CSS-Rändern und -Konturen

Erfahren Sie den Unterschied zwischen CSS-Rändern und -Konturen

WBOYnach vorne: 2023-09-15 08:25:01669Durchsuche

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.

Syntax

Die Syntax für CSS-Rahmen- und Umrisseigenschaften lautet wie folgt –

Selector {
   border: /*value*/
   outline: /*value*/
}

Beispiel

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>

Ausgabe

Dies ergibt die folgende Ausgabe –

Erfahren Sie den Unterschied zwischen CSS-Rändern und -Konturen

Beispiel

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>

Ausgabe

Dies ergibt die folgende Ausgabe:

Erfahren Sie den Unterschied zwischen CSS-Rändern und -Konturen

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!

css

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich mithilfe von CSS eine Google-Suchleiste (wie ein Eingabefeld) beim Hover hervorheben?Nächster Artikel：Wie kann ich mithilfe von CSS eine Google-Suchleiste (wie ein Eingabefeld) beim Hover hervorheben?

In Verbindung stehende Artikel

Mehr sehen