outline

概述

CSS outline 属性 是一个 shorthand 属性为一个或多个独立的轮廓属性outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient.

Outlines differ from borders in the following ways:

• Outlines do not take up space, they are drawn above the content.
• Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this:
  TEXTTEXTTEXT

语法

/* width | style | color */
outline: 1px solid white;

取值

One, two or three values, given in arbitrary order:

<'outline-width'>

See outline-width.

<'outline-style'>

See outline-style.

<'outline-color'>

Since Gecko 1.9 (Firefox 3), the value of the element's color property (foreground color) is used. See outline-color.

形式化语法

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

例子

outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;

/* two identical declarations */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

规范

浏览器兼容性

In browsers previous to Gecko 1.8 (Firefox 1.5) a similar effect can be achieved using Mozilla CSS Extension -moz-outline.

[1] Firefox includes absolutely positioned elements inside the outline (bug 687311).