outline-colorプロパティ

TOPページに戻る > CSS

スポンサード リンク

outline-colorプロパティ

outline-colorプロパティは、輪郭線の色を指定できます。 枠線のさらに外に輪郭線をつけることができます
この輪郭線は、border要素とは違い、要素の幅や高さに影響しません
全要素に適用可能ですが、フォーム関係に使われることが多いです
outline-colorプロパティを使う時はoutline-styleプロパティで輪郭線の種類を指定してください。outline-styleプロパティの初期値がnoneなのでoutline-styleプロパティで輪郭線の種類を指定しないと輪郭線が表示できません
※IE6、IE7が未対応、IE8から対応しています

使い方(書式)

セレクタ { outline-color: 値; }                                    

outline-colorプロパティ

対応ブラウザ ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
16進数 #と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。
例 #FF9900
16進数(3桁) #FF9900を省略して#F90と指定することもできます
10進数 rgb 赤、緑、青の三原色を0から255までの10進数で指定
rgb(255, 128, 0) この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
10進数 rgb % 三原色のパーセントで指定
rgb(100%, 50%, 0%) この場合は100%が赤の色の指定、50%が緑の色の指定、0%が青色の指定
色のキーワード red、green、blue、pinkなど色をキーワードで指定
transparent 枠線を透明にする。トランスパレント

実際の指定方法

.hoge {
 outline-color: #FF6600; /* アウトラインの色を指定 */
 outline-width: 1px;     /* pxでアウトラインの太さを指定  */
 outline-style: solid;   /* アウトラインの種類を指定  */
 margin-bottom: 20px;    /* 下のマージンを20pxに指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }
.hoge2 {
 outline-color: #3F0;    /* アウトラインの色を指定 */
 outline-width: medium;  /* キーワードでアウトラインの太さを指定 */
 outline-style: solid;   /* アウトラインの種類を指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }

html部分

<form>
<textarea class="hoge">outline-width: 1px;</textarea>
</form>
<form>
<textarea class="hoge2">outline-width: medium;</textarea>
</form>

実際の表示





(C)2012 ホームページ作成無料