CSS：概要

例えば、使用量と同様の国境を概説：

.outline {
　　概要：1ピクセル固体＃000。
}

どちらも、同様の性能、外部へのフレームのすべての要素を持っていますが、役割は同じではありません。

1.アウトラインが、フォーカス状態とキーボードアクセスの近くで、プロパティとユーザー体験に密接に関連しています。

リンク、ボタン、入力ボックスや他のフォーム要素、または共通の要素のtabindexのセットを集中、Shiftキーを押しながら：Webページを訪問している間、マウスが壊れている場合は、この時間は、我々は通常含め、制御要素、順番に集中し続けるために、Tabキーを使用します+ Tabキーの組み合わせは逆方向にアクセスします。

デフォルトでは、ブラウザ内の要素は仮想外枠を放出するかの区別やヒントの形で状態を中心に説明する、仮想発光ブロックであるか、または外側の輪郭のデフォルトブラウザは、以下グーグルデフォルトアウトラインの効果です。この概要は、それは、この時点で、ENTERキーを押して、この要素をクリックすることと同じです上の彼らの現在の焦点の上の要素、およびユーザを促すことができ、非常に便利です。

2.アウトラインはスペースを占有しません。

かなり大きいです、それはすべてのスペースを占有しない設定に関わらず概説し、いくつかの特殊効果のレイアウトを達成するために使用することができます

長方形の中空の効果（1）ヘッドカット、以下では、最も単純な中空の効果です。

<HTML> 
  <HEAD> 
    <スタイル> 
      .crop { 
        オーバーフロー：隠されました。
        高さ：300ピクセル; 
        幅：300ピクセル; 
        背景：＃1 F00; 
      } 
      .crop > .crop- 領域{ 
        幅：80px; 高さ：80px; 
        概要：9999px固体RGBA（ 0,0,0、0.5 ）; 
        カーソル：移動。
      }
     </スタイル> 
  </ head> 
  <body> 
    <DIV CLASS = "作物"> 
      <DIV CLASS = "作物領域"> 

      </ div> 
    </ div> 
  </ body> 
</ HTML>

（2）自動的に残りのスクリーンスペースアプリケーション技術を埋めます

大きな空白が完了した後に残る内容を表示するために、次のコードを見てください：

<HTML> 
  <HEAD> 
    <スタイル> 
      .footer { 
         高さ：は50px; 
      } 
      .footer > P { 
        位置：絶対。
        左： 0; 右：0 ; 
        テキスト - 揃える：センター; 
        パディング：15ピクセル 0 ; 
        背景 - 色：＃1 a0b3d6。
        クリップ：RECT（ 0 9999px 9999px 0 ）。
      }
     </スタイル> 
  </ HEAD> 
  <BODY> 
    <DIV CLASS = "フッタ"> 
      <P>テスト塗りつぶし</ P> 
    </ div> 
  </ BODY> 
<

しかし、アウトラインは、後の背景色で画面を埋めるために追加することができます。

<HTML> 
  <HEAD> 
    <スタイル> 
      .footer { 
         高さ：は50px; 
      } 
      .footer > P { 
        位置：絶対。
        左： 0; 右：0 ; 
        テキスト - 揃える：センター; 
        パディング：15ピクセル 0 ; 
        背景 - 色：＃1 a0b3d6。
       概要：9999px固体＃1 a0b3d6。
        クリップ：RECT（ 0 9999px 9999px 0 ）。
      }
     </スタイル> 
  </ HEAD> 
  <BODY> 
    <DIV CLASS = "フッタ"> 
      <P>テスト塗りつぶし</ P>  
    <
  <

今、もはや画面の高さを心配する必要はありませんが高すぎます！

おすすめ