CSS で内側の境界線を設定する

1. CSS で box-sizing プロパティを使用して内側の境界線を設定する
2. CSS で box-shadow プロパティを使用して内側の境界線を設定する
3. CSS で outline および outline-offset プロパティを使用して内側の境界線を設定する

この記事では、CSS でコンテナ内に境界線を設定する方法を紹介します。コンテナの内側の境界線は、内側の境界線と呼ばれます。

CSS で box-sizing プロパティを使用して内側の境界線を設定する

コンテナ内の要素に境界線またはパディングを追加すると、コンテナのサイズが大きくなります。サイズは最初のものとは異なります。この問題を解消するために、コンテナに内側の境界線を追加できます。

内側の境界線は、境界線とアウトラインプロパティまたは要素の間に作成されるスペースです。表のコンテンツ、画像、段落やヘッダーのテキストに内側の境界線を適用できます。内側の境界線は、長方形、正方形、円形などの任意の形状にすることができます。

内側の境界線は、コンテナーのサイズを大きくすることはなく、事前定義されたサイズは一定になります。box-sizing プロパティを使用して、CSS で内側の境界線を作成できます。box-sizing プロパティを border-box に設定すると、コンテナの寸法内に境界線とパディングが含まれます。

たとえば、box-sizing プロパティを border-box に設定して、div のスタイルを設定します。div の高さと幅を 200px に設定します。次に、幅が 10px、色が赤の塗りつぶしの境界線を作成します。次に、background プロパティを green に設定します。

ここでは、200x200 px のサイズの div を作成しました。10px の境界線を追加しても、コンテナのサイズは変更されませんでした。境界線はコンテナ内にあります。したがって、box-sizing プロパティを使用して、CSS の内側の境界線を設定できます。

サンプルコード：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

CSS で box-shadow プロパティを使用して内側の境界線を設定する

内側の境界線を実現する別の方法は、box-shadow CSS プロパティを使用することです。プロパティを使用して、影ではなく内側の境界線のように見えるはめ込み影を指定できます。

box-shadow の水平および垂直オフセット値を最初の 2つの値として設定できます。他の 3つの値、ぼかし、広がり、色はオプションです。広がり半径を目的の値に設定して、影を作成できます。次に、inset オプションを使用すると、外側の影が内側の影に変わります。影はコンテナの中に落ちます。最後に、それは内側の境界線のように見えます。

たとえば、div の height プロパティと width プロパティを 200px に設定します。背景色を緑に設定します。次に、box-shadow プロパティを使用して、最初の 3つのオプションを 0px に設定します。4 番目のオプションである拡散半径を 10px に設定します。色を赤にして、inset オプションを設定します。

ここでは、box-shadow プロパティを使用して、幅が 10px の内側の境界線を作成しました。

サンプルコード：

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

CSS で outline および outline-offset プロパティを使用して内側の境界線を設定する

CSS の outline および outline-offset プロパティを使用して、内側の境界線を設定できます。outline プロパティは、要素の境界線のサイズ、境界線の種類、および境界線の色を記述します。outline-offset プロパティは、境界線とアウトライン要素の間の距離またはスペースを表します。

たとえば、div の高さと幅を 200px に設定します。背景に緑色を付けます。次に、outline を 5px の赤一色に設定します。次に、outline-offset を -5px に設定します。

ここで、outline プロパティはコンテナに外側の境界線を作成します。outline-offset プロパティを使用して、境界線の幅の負の値に設定すると、外側の境界線が内側の境界線に変更されます。

サンプルコード：

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>