English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @规则(RULES)

CSS Attribute大全

CSS outline 属性使用方法及示例

outline属性为元素的轮廓的所有四个边设置宽度，样式和颜色。它是用于在单个声明中设置各个轮廓属性（即outline-width,outline-style以及outline-color）的简写属性。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：查看全部属性
适用于：所有元素
继承：没有
动画制作：Ja, da einige Attributwerte der Kurzschrift animiert werden können.Bitte beziehen Sie sich auf Animationseigenschaften.
Version:CSS 2,3
JavaScript Syntax:object.style.outline="#cc0000 dotted thin"

outline Syntax

Die Syntax dieses Attributes ist wie folgt:

outline: [ outline-width outline-style outline-color ] | initial | inherit

Hinweis:Falls alle in der Liste aufgeführten Eigenschaften fehlen oder weggelassen werden, wird der Standardwert dieser Eigenschaft (wenn vorhanden) eingefügt. Weitere Informationen finden Sie in den jeweiligen Eigenschaften.

Der folgende Beispiel zeigt, wie die outline-Eigenschaft verwendet wird.

　　p.one {
　　　outline:　2px solid #ff0000;
　　}
　　p.two {
　　　color: #00ff00;
　　　outline-top:　5px solid;
　　}
Testen Sie heraus‹/›

Hinweis:Wennoutline-colorfehlt oder nicht angegeben (z.B. outline: 5px solid;), dann wirdcolorWert der Elementeigenschaft.outline-styleDieser Wert zeigt keine Umrandung an, da outline-Der Standardwert von styleproperty ist none.

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

WertBeschreibung
outline-widthSetzen Sie die Breite der Elementumrandung.
outline-styleSetzen Sie den Linienstil der Elementumrandung.
outline-colorSetzen Sie die Farbe der Elementumrandung.
initialSetzen Sie diesen Wert auf seinen Standardwert.
inheritWenn diese Eigenschaft angegeben ist, wird der Wert der outline-Eigenschaft des übergeordneten Elements verwendet.

Browserkompatibilität

Die Kompatibilität der outline-Eigenschaft der Browser, die Nummern in der folgenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

  • Firefox 1.5Darüber hinaus

  • Google Chrome1+

  • Internet Explorer 8+

  • Apple Safari 1.2+

  • Opera 7+

Warnung: Internet Explorer 7und frühere Versionen unterstützen diese outline-Eigenschaft nicht. IE8Diese Eigenschaft wird unterstützt, erfordert jedoch eine gültige<!DOCTYPE>.

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Tutorials:CSS Umrandung,CSS Rahmen.

Verwandte Eigenschaften:outline-width,outline-style,outline-color

CSS outline-color EigenschaftCSS3 order Eigenschaft