suchen

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

Detaillierte Analyse von Outlines in CSS

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

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-ColorDetaillierte Analyse von Outlines in CSSAnfang: 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