CSS暴露の背景と枠

1.半透明の枠線コンテナに白い背景と半透明の白い枠線を設定すると、bodyの背景が半透明の枠線から透過します.

border: 10px solid hsla(0,0%,100%,0.5);
background: white;

解決策:既定では、背景は枠線の下の領域に広がります.background-clipプロパティを使用して、上記のデフォルトの動作による不便を調整し、その値をpadding-boxに設定すると、ブラウザは内側のエッジで背景を切り取ります.

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip:padding-box;

2.複数の枠線
box-shadowシナリオ
box-shadowを使用して投影を生成します.ただし、「拡張半径」と呼ばれる4番目のパラメータも受け入れられ、正または負の値を指定することで投影面積を大きくまたは小さくすることができます.正の値の拡張半径にゼロのオフセット量とゼロのぼかし値を2つ加えると、実際には実線の枠線のようになります.

background: yellowgreen;
box-shadow:0 0 0 10px #655;

borderプロパティを使用して、まったく同じ枠線効果を生成することができます.しかしbox-shadowの利点は、カンマ構文をサポートし、任意の数の投影を作成できることです.

background: yellowgreen;
box-shadow:0 0 0 10px #655,
           0 0 0 15px deeppink;

box-shadowは積層され,第1層投影は最上位層に位置し,順次類推されることに注意すべきである.そのため、この法則に従って拡張半径を調整する必要があります.以上のコードのように、外輪に5 pxの外枠を追加したい場合は、半径15 px(10 px+5 px)を指定します.
多重投影スキームは,ほとんどの場合正常に動作するが,いくつかの注意点がある.

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

上記の方法で作成された偽の’枠線’は、要素の外輪に現れる.マウスイベントには応答しません.たとえば、サスペンションやクリックなどです.

アウトラインスキームの適用には2層の枠線しか必要ありません.まず通常の枠線を設定し、アウトライン(線)属性を加えて外層の枠線を生成することができます.このシナリオの利点:フレームスタイルが柔軟で、box-shadowシナリオとは異なり、実線フレームのみをシミュレートできます.outline-offsetプロパティで要素エッジとの間隔を制御できます.このプロパティは負の値も受け入れられます.

background: yellowgreen;
border: 10px solid #655;
outline:5px solid deeppink;

このシナリオでは、次の点に注意してください.

では、2層'枠線'シーンのみが適用され、より多層の枠線が必要な場合は、前のスキームを選択します.

枠線は、border-radiusプロパティによって生成されたフィレットに必ずしもフィットしない.

の線は長方形でなくてもよく、異なるブラウザで最終効果をテストする必要があります.

3.柔軟な背景位置決め
難題:多くの場合、容器のある角に対して背景画像を右下角のようにオフセット位置決めしますが、画像と容器の角の間に一定の隙間を残してほしいです.
background-positionの拡張構文スキーム
background-positionプロパティを使用すると、バックグラウンドピクチャの任意の角からのオフセット量を指定できます.オフセット量の前にキーワードを指定してください.

background:url(code-pirate.svg) no-repeat #58a;
background-position:right 20px bottom 10px

ロールバックスキーム:backgroundのスケッチ属性に古いbottom right位置決め値を書き込む

background:url(code-pirate.svg) no-repeat bottom right #58a;
background-position:right 20px bottom 10px

background-originスキームの要件:画像に角のオフセット量を設定すると、コンテナの内側の余白と一致するオフセット量が一般的です.以上のbackground-positionの拡張構文スキームを採用し、コードは以下の通りである.

padding:10px;
background:url(code-pirate.svg) no-repeat bottom right #58a;
background-position:right 10px bottom 10px

質問:コードが足りないDRY:内マージン値を変更するたびに、この値を3つの場所で更新する必要があります.
ボックスモデルでは、各要素に3つの矩形ボックス、broder box、padding box、content boxが存在します.background-positionという属性はどの矩形ボックスに対して指定されていますか?デフォルトではbackground-positionはpadding boxに準拠しており、フレームが背景画像を隠すことはありません.
CSS 3には、この動作を変更するための新しい属性background-originがある.デフォルトではpadding-boxの値です.その値をcontent-boxに変更し、background-positionプロパティ値では、許容領域のエッジを基準にします.

padding:10px;
background:url('code-pirate.svg') no-repeat #58a bottom right;
background-origin:content-box;

注意:以上の2つのシナリオを組み合わせて使用できます.
calc()スキームの問題:バックグラウンドピクチャを底辺10 pxから右側20 pxまでの位置に位置決めする.左上角オフセットの考え方では,100%〜20 pxの水平オフセット量と100%〜10 pxの垂直オフセット量がある.

background:url('code-pirate.svg') no-repeat;
background-position:calc(100% - 20px) calc(100% - 10px);

4.枠線内のフィレット要件:内側にフィレットがあり、枠線または線の4つの角が外部で直角な形状を保つ容器が必要になる場合があります.ソリューション:

background: tan;
border-radius: 0.8em;
padding: 1em;
box-shadow: 0 0 0 0.34em #655;
outline: 0.6em solid #655;

効果の原因:線(outlineプロパティ)はフィレットに追従せず、box-shadowは表示されます.両者を重ねると、box-shadowはエッジとコンテナのフィレットの間の隙間をちょうど埋めます.

5.ストライプの背景

知識点1:2つのカラースケールが重なると、何が起こりますか?

 background: linear-gradient(#fb3 50%,#58a 50%);
 background-size: 100% 30px;

複数のカラースケールが同じ位置にある場合、トランジションの開始色と最後の指定値がそれぞれ1つの無限の小さなトランジション領域が生成されます.効果から見ると、スムーズなグラデーションプロセスではなく、その位置で色が突然変化します.
ナレッジポイント2:リスト全体の前のスケールの位置値よりも小さいスケールの位置値がある場合、そのスケールの位置値はその前のすべてのスケールの位置値の最大値に設定されます.

background: linear-gradient(#fb3 30%,#58a 0);
background-size: 100% 30px;

知識点3:linear-gradient()とradial-gradient()には、repeating-linear-gradient()とrepeating-radial-gradient()のループ式の強化版もあります.これらの動作は、前の2つと似ていますが、背景全体が満たされるまでカラースケールが無限に循環しています.グラデーションを繰り返す例は次のとおりです.

background: repeating-linear-gradient(45deg,#fb3,#58a 30px);

次の単純な線形グラデーションに相当します.

background: repeating-linear-gradient(45deg,
             #fb3,#58a 30px
             #fb3 30px,#58a 60px
             #fb3 60px,#58a 90px,...);

6.平行四角形-擬似要素スキーム

考え方:すべてのスタイルを擬似要素に適用し、擬似要素を変形します.私たちのコンテンツは擬似要素に含まれていないので、コンテンツは変形の影響を受けません.擬似要素が宿主要素の寸法を自動的に継承する簡単な方法:宿主要素にpositionを適用する:relativeスタイル、擬似要素設定position:absolute;次に、すべてのオフセット量をゼロに設定して、宿主要素の寸法まで水平方向と垂直方向に引き伸ばさせます.

.container{
      position: relative;
}
.container::before{
      background: #58a;
      content:'';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      transform: skewX(-45deg);
}

注意:擬似要素が生成したブロックがコンテンツの上に重なるため、擬似要素にz-index:-1を設定し、その積層スタイルをホスト要素の後にプッシュします.このテクニックは、要素を変形したくないが、その内容を変形したくない場合に適しています.