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

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS outline 属性の使用方法と例

outline属性は、要素の枠線のすべての4つの辺に幅、スタイル、色を設定します。これは、個々の枠線属性を単一の宣言で設定するために使用されます(即outline-widthoutline-styleおよびoutline-colorのショートカット属性です。

以下の表は、この属性の使用方法とバージョン履歴、およびJavaScriptスクリプト内での属性の使用方法を示しています。

デフォルト値:全ての属性を表示
適用:全ての要素
継承:ありません
アニメーション制作可能:是,因为速记的某些属性可以设置动画。はい、速記の一部の属性はアニメーションを設定できます。 参照してください
アニメーション属性CSS 2バージョン:3
JavaScriptの構文:object

.style.outline="#cc0000 dotted thin"

outlineの使用構文

この属性の構文は以下の通りです:-outline: [ outline-width outline-style outline

color ] | initial | inherit

上に記載されている属性がすべて欠けているか省略されている場合、その属性のデフォルト値(設定されている場合)が挿入されます。詳細については、各属性を参照してください。

  例
   p.one { 2outline:
  px solid;
  px solid #ff0000;
   p.two {
   outline-color: #00ff00; 5top:
  px solid;
}/テストして見て‹

注意:outline-colorが指定されていない場合 5px solid;が欠けている場合や指定されていない場合(例えばoutline:color要素属性の値が省略されている場合や指定されていない場合(例えばoutline:outline-styleこの値はアウトラインが表示されません、なぜならoutline-stylepropertyのデフォルト値はnoneです。

属性値

以下のテーブルはこの属性の値を説明しています。

説明
outline-width要素のアウトラインの幅を設定します。
outline-style要素のアウトラインの線のスタイルを設定します。
outline-color要素のアウトラインの色を設定します。
initialこの属性をデフォルト値に設定します。
inherit指定された場合、関連する要素は親要素のoutlineの属性値を使用します。

ブラウザ互換性

outline属性のブラウザの互換性について、以下のテーブルにはその属性をサポートするブラウザの最低バージョン番号が示されています;すべての主要ブラウザはこの属性をサポートしています。

  • Firefox 1.5以上

  • Google Chrome1+

  • Internet Explorer 8+

  • Apple Safari 1.2+

  • Opera 7+

警告: Internet Explorer 7およびより古いバージョンではこのoutline属性をサポートしていません。IE8この属性をサポートしていますが、有効な<!DOCTYPE>

さらに詳しく

以下のチュートリアルを参照してください:CSSアウトラインCSSボーダー

関連属性:outline-widthoutline-styleoutline-color