CSS3で複数の枠線を実装する方法を詳しく解説

CSS3 の box-shadow は、複数の境界線を作成するのに非常に強力です。これは、CSS3 の複数の境界線を実装する方法の詳細な説明の焦点でもあります。その前に、互換性の高い従来の方法を見てみましょう。方法 1: p ネストを使用して複数の境界線を実現します。

レンダリング:

htmlコード

<p id="outer">
    <p id="inner">p嵌套实现多重边框</p>
</p>

cssコード

#outer {   
    width: 100px;   
    height: 100px;   
    background-color: bisque;   
    border: 10px solid brown;   
    position: relative;   
}   

#inner {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
}   
/*#outer,
#inner {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

欠点: 構造を変更できない場合や、HTML構造の変更コストが高い場合があります。複数の PS が角が丸くなるように設定されており、フレームが完全にフィットしません。丸みを帯びた複数の境界線のレンダリング:

方法 2: 複数の境界線を実現するには、outline+outline-offset を使用します。

2 つのレイヤーの境界線を描画するだけの場合は、アウトラインを使用することもできます。アウトラインはボーダーの外側のレイヤーであり、ボーダーの原則と同じです。アウトラインスタイルを設定すると、枠線の外側にもう一つ枠線のレイヤーを設定できます。 ただし、outline 属性で設定した枠線は、内部要素の枠線スタイルを変更しても変更されないことに注意してください。つまり、要素の境界線の角が丸くなっている場合でも、アウトラインで描かれた最も外側の境界線は長方形のままです。これはアウトライン描画枠の欠点です。
レンダリング:


html code

<p id="outline">outlie实现多重边框</p>

css code

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/
}

利点: 境界線に似ており、点線や実線など、さまざまな線種を設定できます。

短所: アウトラインはレイアウトに影響を与えないため、境界線用のスペースを確保するためにマージンを使用する必要があります。他の要素で覆われないようにするためです。コンテナ自体の角が丸い場合、ストロークは角の丸い部分に完全に適合できません。レンダリングは次のようになります。

方法 3: ボックスシャドウの外側投影を使用して複数の境界線を実現します。

box-shadow 属性はボックスモデルの影を設定できます。しかし実際には、境界線を設定する機能もあります。 box-shadow は 5 つのパラメータを渡すことができます。最初の 2 つのパラメータは投影のオフセットを表し、3 番目のパラメータは投影のぼかし度を表し、4 番目のパラメータは投影の拡大を表し、最後のパラメータは投影の色を表します。投影。ただし、4 番目のパラメーターを使用することはほとんどありません。ここで 4 番目のパラメーターを使用すると、より適切な値を設定することで、境界線の効果をシミュレートできます。
同様に、box-shadow 属性は、「,」で区切られた複数のシャドウのリストを渡すことができます。したがって、シャドウ リストを定義し、その拡張パラメータの値を段階的に増加させれば、複数の境界線の効果を描画できます。 レンダリング:



html コード

<p id="boxShadow">boxshadow实现多重边框(外投影)</p>

css コード

#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/
}

利点: 複数の丸い角が同時に完全に位置合わせされ、リストを受け取って複数の投影を設定することもできます。一度に（つまり、境界）。その拡張効果は、要素自体の形状に基づいています。要素が長方形の場合は、より大きな長方形に拡張され、要素の角が丸い場合は、角が丸い形状に拡張されます。

欠点: CSS3 プロパティは互換性が低く、box-shadow はレイアウトに影響しません。この要素と他の要素の相対的な位置が重要な場合は、外側のマージンなどを使用して余分な「境界線」のためのスペースを確保する必要があります。他の要素で覆われないように位置をずらしてください。

注: インライン シャドウ (つまり、box-shadow 追加パラメーターがインセットされており、設定されていない場合のデフォルトは外側のシャドウ) を使用する方が良い選択のようです。インライン ドロップ シャドウを使用すると要素内にドロップ シャドウを表示できるため、パディングを設定して要素内に複数の境界線を配置できるスペースを確保する方が簡単です。

方法 4: ボックスシャドウ内部投影を使用して複数の境界線を実現します。 (推奨)

レンダリング:

html コード

<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>

css コード

/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/
}

利点: インライン投影により、要素内に影を表示でき、要素内にパディングを設定できます。複数の国境に対応できるため、対処が容易になります。

欠点: CSS3 プロパティ、互換性の低さ

以上がCSS3で複数の枠線を実装する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。