CSS Outline (Profilo)

(outline) La linea di contorno (outline) è una linea disegnata al di fuori del bordo di un elemento (ad esempio pulsanti, campi di modulo attivi, ecc.) per evidenziarlo.

Profilo (Outline) VS Bordo (Border)

轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似，但在以下方面与边框有所不同：

• 轮廓不占用空间，因为它们始终放置在元素框的顶部，这可能导致它们与页面上的其他元素重叠。

• 与边框不同，轮廓不允许我们将每个边缘设置为不同的宽度，也不能为每个边缘设置不同的颜色和样式。轮廓在所有方面都是相同的。

• 轮廓除了重叠之外，对周围的元素没有任何影响。

• 与边框不同，轮廓不会更改元素的大小或位置。

• 轮廓可能不是矩形的。

outline-width 轮廓宽度属性

outline-width 属性指定要添加到元素上的轮廓的宽度。它的值应该是一个 CSS 长度（px，pt，em 等）或允许的关键字之一，但百分比或负值是不允许的。就像border-width财产一样。

p　{
　　　　outline-width: thick;
}

outline-style 轮廓样式的属性

该 outline-style 属性设置样式轮廓，如：solid，dotted 等等。

该属性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge 和 solid。就像border-style值一样。

p　{
　　　　outline-style: double;
}

outline-color 轮廓颜色属性

outline-color 属性设置轮廓的颜色。

p　{
　　　　outline-style: solid;
　　　　outline-color: #0000ff;
}

也可以将设置 outline-color 为 transparent。

Attributo di abbreviazione del contorno

L'attributo outline CSS è una abbreviazione di breve scrittura per impostare un o più attributi di contorno singoli in un singolo regola outline-style, outline-width e outline-color.

p　{
　　　　outline:　5px　solid　#9acd32;
}

Se si ignora o non si specifica il valore di un singolo attributo di contorno quando si imposta l'attributo di contorno abbreviato, l'outline utilizzerà il valore predefinito dell'attributo (se presente).

Nell'esempio seguente, il contorno sarà una linea continua nera di larghezza 5px:

p　{
　　　　color:　black;
　　　　outline:　5px　solid;
}

Ma, nei casioutline-style，omissione del valore non mostrerà alcun contorno, poiché il valore predefinito dell'attributo outline-style è none.

Nell'esempio seguente, non ci sarà alcun contorno:

p　{
　　　　outline:　5px　#00ff00;
}

Rimuovere la linea tratteggiata intorno ai link attivi

L'attributo outline è utilizzato ampiamente per rimuovere la linea tratteggiata intorno ai link attivi.

a,　a:acive,　a:focus　{
　　　　outline:　none;　/*　Funziona in Firefox, Chrome, IE8 e superiori　*/
}