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

CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基礎教程

CSS 参考手册

CSS @規則(RULES)

CSS Outline(轮廓)

(outline)輪廓線是在元素(例如按鈕,活動表單域等)的邊框邊緣外部繪製的一條線,以使其突出。

輪廓(Outline) VS 邊框(Border)

輪廓通常用於突出顯示元素。輪廓一眼看上去與邊框非常相似,但在以下方面與邊框有所不同:

  • 輪廓不佔用空間,因為它們始終放置在元素框的頂部,這可能導致它們與頁面上的其他元素重疊。

  • 與邊框不同,輪廓不允許我們將每個邊緣設為不同的寬度,也不能為每個邊緣設置不同的顏色和樣式。輪廓在所有方面都是相同的。

  • 輪廓除了重疊之外,對周圍的元素沒有任何影響。

  • 與邊框不同,輪廓不會更改元素的大小或位置。

  • 輪廓可能不是矩形的。

注意:如果將輪廓放在元素上,則它將在網頁上佔用相同的空间,就好像您對該元素沒有輪廓一樣。

outline-width 輪廓寬度屬性

outline-width屬性指定要添加到元素上的輪廓的寬度。它的值應該是一個CSS長度(px,pt,em等)或允許的關鍵字之一,但百分比或負值是不允許的。就像border-width財產一樣。

p {
    outline-width: thick;
}
テストして‹/›

注意:如果outline-width缺少或未指定的值,則將使用的默認值(medium)代替。

outline-style 輪廓樣式的屬性

該outline-style屬性設定樣式輪廓,如:solid,dotted等等。

該屬性可採取以下值之一:none,hidden,dashed,dotted,double,groove,inset,outset,ridge和solid。就像border-style值一樣。

none: 沒有定義輪廓。

hidden: 定義隱藏的輪廓。

dotted: 定義虛線輪廓

dashed: 定義虛線輪廓

solid: 定義一個堅實的輪廓

double:定義兩個輪廓。兩個輪廓的寬度與輪廓寬度值相同

groove:定義3D溝槽輪廓。效果取決於輪廓色彩值

ridge:定義3D脊形輪廓。效果取決於輪廓色彩值

inset:定義3D插入輪廓。效果取決於輪廓色彩值

outset:定義3D起始輪廓。效果取決於輪廓色彩值

p {
    outline-style: double;
}
テストして‹/›

outline-color 輪廓色彩屬性

outline-color属性設定輪廓的色彩。

p {
    outline-style: solid;
    outline-color: black;
}
テストして‹/›

また、outline-colorをtransparentに設定

注意:outline-colorを単独で使用すると、この属性は無効になります。outlineを使用して-style属性はまず枠線を設定します。

枠線ショートカット属性

CSS outline属性は、1つまたは複数の個別の枠線属性を設定するためのショートカット属性outlineです-style、outline-widthおよびoutline-colorを単一のルールで指定

p {
    outline: 5px solid #9acd32;
}
テストして‹/›

枠線のショートカット属性を設定する際に、個々の枠線属性の値を無視したり指定しなかった場合、outlineはその属性のデフォルト値(もしあれば)を使用します。

注意:outline-color要素の枠線を設定する際に、属性値が欠けているか、属性値が指定されていない場合(例えばoutline: 5px solid;と指定された場合、その要素のcolor属性はoutline-color。

以下の例では、枠線の幅は5pxの黒い実線:

p {
    color: black;
    outline: 5px solid;
}
テストして‹/›

しかし、以下の状況ではoutline-style、この値を省略すると、outline-stylepropertyのデフォルト値はnoneです。

以下の例では、枠線はありません:

p {
    outline: 5px #00ff00;
}
テストして‹/›

警告: Internet Explorer 7およびそれ以前のバージョンではoutline属性がサポートされていません。IE8 outlineは<!DOCTYPE>aを指定した場合のみ、この属性がサポートされます。

アクティブなリンクの周りの破線を削除

このoutline属性は、アクティブなリンクの周りの破線を削除するために広く使用されています。

a, a:acive, a:focus {
    outline: none; /* Firefox、Chrome、IEで動作8 および上 */
}
テストして‹/›