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

outline-offset:要素と輪郭線の距離CSS3で追加

記事Apr. 17th,2021
要素と輪郭線の間の距離を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

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

outline-offset”プロパティは要素の要素と輪郭線の間の距離を指定するプロパティです。

既定では輪郭線は境界線の外縁に沿って配されますが、“outline-offset”プロパティによって輪郭線を要素から離すことができます。

outline-offset”プロパティは境界線の外縁と輪郭線の内縁の距離を指定します。輪郭線と境界線の間は透明です。

サンプルコード

div { outline-offset: 5px;}

説明
<length> pxemなどで境界線の外縁と輪郭線の距離を指定 (負の値の場合は輪郭線は要素の中に描画されます。輪郭線が成す図形の横幅と高さはoutline-width”プロパティの値の2倍より小さくはなりません。)
共通キーワード

仕様書

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

定義なし

定義あり

定義あり

使用例

要素と輪郭線の距離を指定する

div { outline-offset: 10px;}
outline-offset: 10px;

輪郭線を要素の内側に描画する

div { outline-offset: 10px;}
outline-offset: -10px;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク