Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)

青灯夜游

Sep 14, 2018 am 11:07 AM

bordercssoutline

In diesem Kapitel erfahren Sie, wie Sie das CSS-Outline-Attribut verwenden. Der Unterschied zwischen dem Umrissattribut und dem Randattribut (Beispiel) , damit jeder etwas Wissen über das Umrissattribut in CSS sowie den Unterschied zwischen dem Umriss- und dem Randattributunterschied verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Was ist das CSS-Outline-Attribut (Outline)? Der Rand des Randes Die Peripherie kann die Rolle des Hervorhebens von Elementen spielen. Zum Beispiel: Wenn wir normalerweise den Inhalt im Browser lesen und mit der Maus auf einen Tag-Link oder ein Eingabe-Optionsfeld klicken, um den Fokus zu erhalten, wird das Element von einer konturierten, gestrichelten Box umgeben. Dieser gepunktete Rahmen ist der Umriss.

Wenn Sie auf ein Tag klicken, eine Eingabe machen oder ein Mausklickereignis hinzufügen, hinterlässt der Browser standardmäßig einen Umrissrahmen (blau unter Chrom). Allerdings beeinträchtigen diese standardmäßigen Umrissrahmen manchmal das Erscheinungsbild und zerstören den Gesamteffekt der Frontend-Seite. Wir möchten sie nicht wirklich beibehalten. Wie kann man also den standardmäßigen Umrissrahmen des Browsers entfernen oder den standardmäßigen Umrissrahmeneffekt ändern?

Das Outline-Attribut von CSS ermöglicht es uns, den standardmäßigen Outline-Punkte-Box-Effekt zu ändern. Das Gliederungsattribut hat die folgenden verwandten Attribute:

outline: Legt alle Gliederungsattribute in einer Anweisung fest.

outline-style: Legt den Stil von fest der Umriss
outline-width: Legt die Breite des Umrisses fest
outline-color: Legt die Farbe des Umrisses fest
Umriss-Offset: Versetzen Sie den Umriss und zeichnen Sie ihn am Rand des Rahmens
Das erste verwandte Attribut Umriss ist eine Kurzform, die Das Format lautet:
```
outline: outline-color || outline-style || outline-width；
```
Lassen Sie uns die zugehörigen Stile der Gliederung nicht einzeln festlegen, sondern können die Einstellungen sofort abschließen.

Sehen wir uns anhand des folgenden Beispiels an, wie das CSS-Umrissattribut verwendet wird:

Wenn Sie möchten, dass der Link beim Fokussieren auffälliger ist, können Sie die Umrisslinie auf einstellen rot, wie folgt:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮廓--outline</title>
		<style>
			
			.a { outline:5px solid red; }
		</style>
	</head>
	<body>
			<a href="#">我是默认下的连接</a><br /><br />
			<a href="#" class="a">我是一个测试连接，会红</a>
	</body>
</html>

Die Darstellung ist wie folgt:

Und wenn Sie nur die Umrisslinien auf der Registerkarte entfernen möchten, die sich auf die Schönheit auswirken , das Umrissattribut kann wie folgt festgelegt werden:

.tab{ outline: none; ...... /* other properties */}

Aus dem obigen Beispiel können wir ersehen, dass Umriss und Rand sehr ähnlich sind, Umriss und Rand jedoch ähnlich, aber unterschiedlich. Wie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel)

2. Der Unterschied zwischen Umriss und Rand

Der Umriss nimmt keinen zusätzlichen Platz ein Breite oder Höhe; der Rand nimmt die Breite ein; daher hat der Umriss keinen Einfluss auf die Größe oder Position des Elements, wie dies bei einem Rand der Fall ist.

Umriss kann nicht rechteckig sein; der Rand ist ein gewöhnlicher Rand.
outline ist für Elemente wie Links, Formularsteuerelemente und ImageMap-Rahmen konzipiert und kann auf fast alle greifbaren HTML-Elemente angewendet werden.

Das obige ist der detaillierte Inhalt vonWie wird das CSS-Outline-Attribut verwendet? Der Unterschied zwischen Umrissattributen und Randattributen (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css里outline是什么Jul 27, 2022 pm 08:39 PM

在css中，outline指的是设置元素轮廓的属性，可以指定元素轮廓的样式、颜色和宽度。outline是一个简写属性，可以在一个声明中按顺序同时设置样式、颜色和宽度，语法“outline:outline-color outline-style outline-width;”；如果不设置其中的某个值，也不会出问题。