⌘K

プロパティ outline-style

プロパティ outline-style は、 スペースを占有しない境界線であるアウトラインの スタイルを指定します。

構文

cssセレクタ {
  outline-style: 値;
}

値

値 説明
solid 実線。
dotted 点線のアウトライン。
dashed 破線のアウトライン。
ridge 隆起した線のアウトライン。
double 二重線のアウトライン。 効果を見るには、境界線の太さが最低 3px である必要があります。
groove 窪んだアウトライン。
inset 内側に沈んだアウトライン。
outset 外側に突き出たアウトライン。
none 境界線なし。

デフォルト値: none。

例 . solid の値

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . dotted の値

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . dashed の値

html<div id="elem"></div>
css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . ridge の値

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . double の値

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . groove の値

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . inset の値

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

例 . outset の値

html<div id="elem"></div>
css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

関連項目

  • アウトラインの色を指定するプロパティ outline-color
  • アウトラインの太さを指定するプロパティ outline-width
  • アウトラインの一括指定プロパティである outline
  • アウトラインのオフセットを指定するプロパティ outline-offset
Backプロパティ outline-widthNextプロパティ outline-color