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

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

WBOY
Freigeben: 2023-09-15 08:25:01
nach vorne
721 Leute haben es durchsucht

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*/
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage