CSS 境界線効果の使用に関するヒントを共有する

半透明の境界線を実現するにはどうすればよいですか?複数の境界線を実装するにはどうすればよいですか?この記事では、CSS ボーダー効果を実装するためのテクニックを紹介します。興味のある方は参考にしてください。具体的な内容は次のとおりです。

1.私たちには、そのような要件があります。背景

画像の領域で、半透明の白い境界線を持つ白いPを定義

します。これを実装するときに最初に思い浮かぶのは、境界線の透明度を定義できるということです。コードは次のとおりです。

p{   
background:white;   
border:20px solidhsla(0,0%,100%,.5);   
}

ここで hsla は色を定義するメソッドであり、そのパラメーターの意味は次のとおりです。 :

H: 色相（色合い）。 0 (または 360) は赤を表し、120 は緑を表し、240 は青を表し、その他の値を使用して色を指定することもできます。値は: 0 ～ 360

S: 彩度。値は: 0.0% - 100.0%

L: 明度。値は: 0.0% - 100.0% です

A: アルファ透明度。値は 0 から 1 までです

上記のスタイル設定をブラウザで実行すると、期待した結果が表示されないことがわかりました。 p は、境界線効果のない純粋な白の p です。

この問題の原因は、白い p が半透明の白い境界線をブロックしていることです。なぜなら、p が白に設定されている場合、この p の

ボックスモデル

全体の色が白になるからです。半透明の白い境界線が設定されている場合、この白い p に配置すると境界線は表示されません (p の白色によって境界線が引き出されている場合、境界線を表示する方法はありません)。

この問題を解決するには、CSS3 の新しい

プロパティ - background-clip

を使用する必要があります。バックグラウンドクリップ背景の描画領域を指定します：bulder-box背景はボーダーボックスにバックグラウンドクリップにクリップされ、バックグラウンドクリップの値はボーダークリップです。上の例では、境界線の周囲まで p 全体が白になります。そこで、background-clip属性の値をpadding-boxに設定すると、外側の境界線を色なしで塗りつぶし、設定した半透明の境界線を表示できます。 コードは次のとおりです。

p{   
       background:white;   
       border:20pxsolid hsla(0,0%,100%,.5);   
       background-clip:padding-box;   
}

ブラウザのスタイルに合わせて、期待どおりの白い半透明の境界線効果が表示されます。

2. 複数の境界線

場合によっては、特殊効果を得るために要素に複数の境界線を追加する必要がある場合があります。複数の境界線を追加する 2 つの方法を次に示します。

1.box-shadow

box-shadow プロパティは、ボックス モデルのシャドウを設定できます。しかし実際には、境界線を設定する機能もあります。

box-shadow は 5 つのパラメータを渡すことができます。最初の 2 つのパラメータは投影のオフセットを表し、3 番目のパラメータは投影のぼかし度を表し、4 番目のパラメータは投影の拡大を表し、最後のパラメータは投影の色を表します。投影。ただし、4 番目のパラメーターを使用することはほとんどありません。ここで 4 番目のパラメーターを使用すると、より適切な値を設定することで、境界線の効果をシミュレートできます。

同様に、box-shadow 属性は、「,」で区切られた複数のシャドウのリストを渡すことができます。したがって、シャドウ リストを定義し、その拡張パラメータの値を段階的に増加させれば、複数の境界線の効果を描画できます。

2.アウトライン

2 つのレイヤーの境界線を描画するだけの場合は、アウトラインを使用して描画することもできます。アウトラインはボーダーの外側のレイヤーであり、ボーダーの原則と同じです。アウトラインスタイルを設定すると、枠線の外側にもう一つ枠線のレイヤーを設定できます。

ただし、outline属性で設定した枠線は、内部要素の枠線スタイルを変更しても変更されないことに注意してください。つまり、要素の境界線の角が丸くなっている場合でも、アウトラインで描かれた最も外側の境界線は長方形のままです。これはアウトライン描画枠の欠点です。

以上がこの記事の内容です。CSSボーダー実装スキルをマスターしていただければ幸いです。

以上がCSS 境界線効果の使用に関するヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。