no-image

ボックス

box-shadow/ボックスに影

ボックスに影をつける

結果

box-shadow:
2px 2px 0px gray;
box-shadow:
padding-box; -2px -2px -0px gray;
box-shadow:
2px 2px 2px red,-2px -2px -2px gray;

解説

box-shadowは、ボックスに影を指定できます。
内わけは、「右px 下px ぼかしpx 色」になります。
ふたつ指定するときはカンマで区切ります。

box-sizing/幅にボーダーを含むか

幅指定にボーダーを含むかの指定

結果

box-sizing: border-box;
box-sizing: content-box;

解説

box-sizingは、ボックスにボーダーを含むかどうかの指定です。

例題を見ていただければわかりますが、「box-border」は、横幅、縦幅にボーダーを含んでいます。

「box-border」は、横幅、縦幅にボーダーを含みません。

具体的に解説しますと、box-borderの場合、横幅200px+(5px+5px)=実質210pxで表示されます。

outline-offset/アウトラインの間

ボーダーとアウトラインの間

結果

outline-offset: 5px;
outline-offset: 10px;

解説

outline-offsetは、ボーダーとアウトラインの幅を指定できます。

resize/コメント欄の幅を調節

コメント欄の幅を調節するか

結果

解説

resizeは、コメント欄の幅を調節できるかの指定です。
「both」は、横幅、縦幅を調節できます。
「horizontal」は、横幅のみを調節できます。
「vertical」は、縦幅のみを調節できます。
「none」は、変更不可。