Heim > Artikel > Web-Frontend > Detaillierte Analyse von Outlines in CSS

Detaillierte Analyse von Outlines in CSS

黄舟Original: 2017-07-27 09:15:011790Durchsuche

Beschreibung:

Eine Linie, die um das Element herum gezeichnet wird und sich außerhalb des Randes befindet, die das Element hervorheben kann und keinen Platz einnimmt.

Nicht verfügbar unter IE.

Tabelle> Beispiel: Wirkung unter Firefox

Eigenschaften

Beschreibung

Bemerkungen

outline

Zusammengesetztes Attribut

属性	描述	备注
outline	复合属性设置或者检索对象外的线条轮廓,外轮廓(outline)画在边框(border)的外面,不一定是矩形	outline:outline-color\|\|outline-style\|\|outline-width
outline-color	设置或检索对象外的线条轮廓的颜色	color:颜色 invert:默认值,使用背景色的反色
outline-style	设置或检索对象外的线条轮廓的样式	none:默认值 dotted:点线外轮廓 dashed:虚线外轮廓 solid:实线外轮廓 double:双线外轮廓 groove:根据outline-color的值画3D凹槽外轮廓 ridge:根据outline-color的值画3D凸槽外轮廓 inset:根据outline-color的值画3D凹边外轮廓 outset:根据outline-color的值画3D凸边外轮廓
outline-width	设置或检索对象外的线条轮廓的宽度	medium:默认.默认宽度 thin:小于默认宽度 thick:大于默认宽度 length:长度

Legt Linien außerhalb des Objekts fest oder ruft diese ab Umriss, der äußere Umriss (Umriss) wird außerhalb des Rahmens (Border) gezeichnet, nicht unbedingt ein Rechteck

outline:outline-color||outline-style||outline-width td >

outline-color

Legen Sie die Farbe des Linienumrisses außerhalb des Objekts fest oder rufen Sie sie ab

Farbe: Farbe

invertieren: Standardwert, verwenden Sie die umgekehrte Farbe der Hintergrundfarbe

outline-style

Legen Sie den Stil der Linienkontur außerhalb des Objekts fest oder rufen Sie ihn ab.

keine: Standardwertgepunktet: gepunktete Kontur

gestrichelt: gepunktet Umriss

durchgezogen: Außenkontur mit durchgezogener Linie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        
        span
        {
        	border:solid 1px red;
        	display:block;
        	width:200px;
        }
        
        .span1
        {
        	outline-style:dotted;
        }
        
        .span2
        {
        	outline-style:dashed;
        }
        
        .span3
        {
        	outline-style:groove;
        }
        
        .span4
        {
        	outline-style:ridge;
        }
        
        .span5
        {
        	outline-style:inset;
        }
        
        .span6
        {
        	outline-style:outset;
        }
    
    </style>
</head>
<body>
    <span class="span1">111111111</span><br />
    <span class="span2">222222222</span><br />
    <span class="span3">333333333</span><br />
    <span class="span4">444444444</span><br />
    <span class="span5">555555555</span><br />
    <span class="span6">666666666</span>
</body>
</html>

doppelt: Außenkontur mit doppelter Linie

Groove: Zeichnen Sie die 3D-Außenkontur der Nut entsprechend dem Wert von Umrissfarbe

Kamm: Zeichnen Sie die 3D-Außenkontur der konvexen Nut entsprechend dem Wert von Outline-Color

Einschub: Zeichnen Sie eine 3D-konkave Außenkontur entsprechend dem Wert von Outline-Color Detaillierte Analyse von Outlines in CSS Anfang: Zeichnen Sie eine 3D-konvexe Außenkontur entsprechend dem Wert von Outline-Color

outline-width

Legen Sie die Breite des Linienumrisses außerhalb des Objekts fest oder rufen Sie sie ab

mittel: Standard.Standardbreitedünn: Weniger als die StandardbreiteDicke: größer als die StandardbreiteLänge: Länge

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von Outlines in CSS. 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

Vorheriger Artikel：Einführung in das Verhaltensattribut in CSS und seine Verwendung anhand von BeispielenNächster Artikel：Einführung in das Verhaltensattribut in CSS und seine Verwendung anhand von Beispielen

In Verbindung stehende Artikel

Mehr sehen