このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

outline-style:輪郭線の見た目

記事Apr. 17th,2021
輪郭線の見た目を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 outline-style: none;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定したキーワード
アニメーション 算出された値による

outline-style”プロパティは要素の輪郭線の見た目を指定するプロパティです。

サンプルコード

div { outline-style: dotted;}

説明
<line-style>”値
none 輪郭線を表示せず、輪郭線の太さや色の指定は無視されます (outline-collapse: collapse;の場合に重なる輪郭線があればその輪郭線が表示されます。)
dotted 点線
dashed 破線
solid 実線
double 二重線
groove 溝のように見える線
ridge 出っ張りのように見える線
inset 輪郭線の中身が沈み込んでいるように見える線 (outline-collapse: collapse;の場合は“ridge”とみなされます。)
outset 輪郭線の中身が出っ張っているように見える線 (outline-collapse: collapse;の場合は“groove”とみなされます。)
他の値
autoCSS Basic User Interface Module Level 3 で追加 自動 (ユーザー・エージェント独自のスタイルで輪郭線を描画することを許可します。outline-color”プロパティoutline-width”プロパティをどのように扱うかもユーザー・エージェントに任されます。ユーザー・エージェントによっては“solid”として扱います。)
共通キーワード

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
outline-style
定義なし

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
none
定義なし

定義あり

定義あり

定義あり
dotted
定義なし

定義あり

定義あり

定義あり
dashed
定義なし

定義あり

定義あり

定義あり
solid
定義なし

定義あり

定義あり

定義あり
double
定義なし

定義あり

定義あり

定義あり
groove
定義なし

定義あり

定義あり

定義あり
ridge
定義なし

定義あり

定義あり

定義あり
inset
定義なし

定義あり

定義あり

定義あり
outset
定義なし

定義あり

定義あり

定義あり
auto
定義なし

定義なし

定義あり

定義あり

使用例

輪郭線の見た目を指定する

div {
outline-style: none;
outline-color: rgb(168,214,105); /**/
}
outline-style: none;
div {
outline-style: dotted;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: dotted;
div {
outline-style: dashed;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: dashed;
div {
outline-style: solid;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: solid;
div {
outline-style: double;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: double;
div {
outline-style: groove;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: groove;
div {
outline-style: ridge;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: ridge;
div {
outline-style: inset;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: inset;
div {
outline-style: outset;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: outset;

ブラウザ独自のスタイルで輪郭線を描画する

div {
outline-style: auto;
outline-width: 5px;
outline-color: rgb(168,214,105); /**/
}
outline-style: auto;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク