《CSS揭秘》-背景と枠

1.コンテナに白い背景と半透明の白い枠線を設定します。

考え方:実際に設定した背景は枠線のある領域の下層に広がり、background-clipプロパティで背景のデフォルトの動作を調整できます.
background-clipプロパティbackground-clipプロパティbackground-clipプロパティbackgroundプロパティbackground-clipプロパティbackgroundプロパティbackground
値
説明
border-box
背景が枠ボックスに切り取られます
padding-box
バックグラウンドが内側余白ボックスに切り取られます
content-box
背景はコンテンツボックスに切り取られます

border: 20px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box;

2.マルチボーダー実装

box-shadowシナリオ
構想:box-shadowの4番目のパラメータ(拡張半径)で正負値を指定し、投影面積を大きくしたり小さくしたりします.正の値の拡張半径にゼロのオフセット量とゼロのぼかし値を2つ加えると、実線の枠線のように投影されます.利点:より多層の枠線を得ることができます.border-radiusプロパティにフィットしてフィレットを生成します.欠点:直線の1つのスタイルしか描けません.
box-shadowプロパティ:ボックスに1つ以上のシャドウを追加します.カンマ分割構文をサポートし、任意の数の投影を作成できます.box-shadowは積層され,第1層投影は最上位層に位置し,順次類推される.そのため、拡張半径を規則的に調整する必要がある.
値
説明
h-shadow
必要です.水平シャドウの位置.負の値を許可
v-shadow
必要です.垂直シャドウの位置.負の値を許可
blur
オプション.ぼかしきょり
spread
オプション.影のサイズ
color
オプション.影の色
inset
オプション.外部シャドウ(outset)を内部シャドウに変更する

box-shadow: h-shadow v-shadow blur spread color inset;

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .5);

注意:

投影の動作はレイアウトに影響を与えず、box-sizingプロパティの影響も受けません.ただし、枠線に必要な占有空間は、内側または外側の距離によって追加的にシミュレートすることができる.

は、要素の外輪に投影され、マウスイベント、例えば、サスペンションやクリックに応答しません.box-shadowプロパティにinsetキーワードを追加して、投影を要素の内輪に描画することができます.この場合、余分な内辺距離を増やして十分な隙間を空ける必要があります.

アウトラインスキーム
考え方:2層の枠線だけで、まず通常の枠線を設定し、outline(線)属性を加えて外層の枠線を生成することができます.利点:枠線スタイルが柔軟です.欠点:2つの枠線のシーンにのみ適用されます.枠線はborder-radiusプロパティによって生成されたフィレットに必ずしもフィットしない.
アウトラインプロパティ:エレメントの周囲に描画される線で、枠線の縁の外周に位置し、エレメントを強調する役割を果たします.
値
説明
outline-color
枠線の色を指定
outline-style
外枠のスタイルを指定
outline-width
枠線の幅を指定

background: yellowgreen;
outline: 5px solid deeppink;

box-radius値の効果を設定します.
outline-offsetプロパティを設定することで、要素のエッジからの距離を制御します.

background: #485152;
outline: 1px dashed #fff;
outline-offset: -10px;

3.容器のある角に対して背景画像をオフセット位置決めする

background-positionの拡張構文スキーム