CSS で複数の境界線を実装するためのヒント

CSS で複数の境界線を実装するためのヒント

1. 複数の国境[1]

背景: ボックスシャドウ、アウトライン
使用シナリオの多様性を考慮すると、複数の境界線を持つデザインが増えています。以前は border-image プロパティを使用して対処できましたが、CSS コード レベルでは柔軟性があまりありません。ここで、box-shadow プロパティと outline プロパティを使用して、それぞれ複数の境界線を実装します。

1. ボックスシャドウソリューション

アイデア: box-shadow の 4 番目のパラメータ (拡張半径) のサイズを使用して、複数の投影を行うコード例:

  <div class="border-multiple">
        複数の境界線を実装するソリューション 1: box-shadow
    </div>

    .border-multiple {
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル; 
        背景色: #fff; 
        ボックスシャドウ: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    } 

ここに画像の説明を挿入

複数の境界線 - box-shadow

まとめ:

1. 影はレイアウトに影響せず、ボックスのサイズにも影響されない
2. カンマ区切りの構文をサポートし、任意の数の投影を作成できます。
3. デメリット: 実線の境界線しか実現できず、他のスタイルの境界線は実現できない

2. 解決策の概要

コード例:

  <div class="border-outline">
        多重境界実装ソリューション2:概要
    </div>
    .border-outline {
        マージン: 200px 自動;
        パディング: 20px;
        幅: 600ピクセル;
        背景色: #ff0;
        アウトライン: 3px 破線 #0f0;
        アウトラインオフセット: -10px;
    } 

ここに画像の説明を挿入

複数の境界線 – アウトライン

まとめ:

1. 前提は2層の国境を実現することである
2. outline-offset属性値は必須となる場合がある
3. アウトラインのデフォルトのストロークは長方形です。角が丸い場合はバグとみなされ、角が丸く収まりません。
4. カンマ構文はサポートされていません

2. 角を丸くする[2]

背景: ボックスシャドウ、アウトライン
上記の例 3 のバグを解決するには、ボックス シャドウの拡張半径を使用して、丸い角とアウトラインの間の隙間を埋めます。
コード例:

  <div class="内側の丸め">
         これを実現するには、box-shadow、アウトライン、「複数の境界線」を使用する必要があります。注: box-shadow の拡張半径は、コーナーの半径の 0.5 倍にする必要があります。</div> 
    .内部丸め {
        背景色: #ccc;
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル; 
        パディング: 20px;
        境界線の半径: 20px;
        ボックスシャドウ: 0 0 0 10px #f00;
        アウトライン: 10px 実線 #f00;
    }

注: ボックスシャドウの拡張半径は、コーナーの半径の0.5倍である必要があります。厳密に言えば、(√2 - 1)倍である必要があり、ここでは計算を容易にするために0.5を採用しています。

ここに画像の説明を挿入

内側の角の境界線

3. 半透明の境界線[3]

背景知識: RGBA または HSLA カラー属性、背景クリップ
アイデア: 切り取られた背景のパディングボックスに境界線を表示します。コード例:

   <div class="border-opacity">
         半透明の境界線の実装</div>
    .border-opacity {
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル;
        境界線: 10px実線 hsla(0, 0%, 100%, 0.5);
        背景色: #fff;
        背景クリップ: パディングボックス;
    }

まとめ:

半透明の境界線を実装するには、CSS3のbackground-clipプロパティを使用する必要があります。
background-clip には 3 つのプロパティがあります。
1. border-box: 背景は境界ボックスにクリップされます(境界は見えません)
2. padding-box: 背景はパディングボックスにクリップされます(境界線が見える)
3. content-box: 背景はコンテンツボックスにクリップされます(境界線はコンテンツに近くなります)

ここに画像の説明を挿入

半透明の境界線効果図

4. 連続した画像の境界線[4]

背景知識: CSS グラデーション、基本的な境界線イメージ、背景クリップ
まず、border-image が画像の境界線をどのように実装するかを見てみましょう。
border-image の実​​装原理は、9 グリッド拡張方式です。つまり、画像を 9 つの部分に分割し、要素境界の対応する端と角に適用します。
コード例:

   <p class="border-image">border-image の実​​装原理は、9 グリッド拡張方式です。つまり、画像を 9 つの部分に分割し、要素境界の対応する端と角に適用します。 </p>
        <p class="border-image">画像の特定の部分を角に固定するのではなく、要素の幅、高さ、境界線の太さが変化すると、角に表示される画像領域も変化するようにします。 </p>
        .border-image {
            境界線: 40px 透明の実線;
            境界線画像: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
            パディング: 1em;
            最大幅: 20em;
            フォント: 130%/1.6 Baskerville、Palatino、セリフ体;
        }
        .border-image:n番目の子(2) {
            上マージン: 1em;
            画像の繰り返し境界線: 丸い;
        } 

ここに画像の説明を挿入

境界線画像効果図

デメリット: 画像の特定の部分を角に固定するのではなく、角に表示される画像領域を要素の幅、高さ、境界線の太さに合わせて変更します。
どうすれば解決できるでしょうか?
実装のアイデア:
1. CSSグラデーションと背景拡張機能を使用する
2. 背景画像の上に、純白の単色背景のレイヤーを重ねます。
3. 下のレイヤーの背景が境界領域を通して見えるようにするには、2 つの背景レイヤーに異なる background-clip 値を指定する必要があります。
4. 複数の背景の下部に背景色を設定します。白から白への CSS グラデーションを使用して、純白の単色背景の効果をシミュレートします。

コード例:

 <p class="contituuous-images">実装のアイデア:
            1. CSS グラデーションと背景拡張機能を使用する 2. 背景画像に純白の単色背景を重ねる 3. 下の背景が境界領域から見えるようにするには、2 つの背景に異なる background-clip 値を指定する必要があります 4. 複数の背景の下部に背景色を設定します。純白の単色背景の効果をシミュレートするには、白から白への CSS グラデーションを使用する必要があります</p>
        .連続画像 {
            パディング: 1em;
            境界線: 1em の透明な実線;
            /* 背景: 線形グラデーション(白、白)、
                            url(http://csssecrets.io/images/stone-art.jpg);
            背景サイズ: カバー;
            背景クリップ: パディングボックス、ボーダーボックス;
            背景の原点: 境界ボックス; */

            /* 背景は以下のように省略することもできます*/
            背景: 線形グラデーション(白、白) パディングボックス、
            url(http://csssecrets.io/images/stone-art.jpg) ボーダーボックス 0 / カバー;

            幅: 21em;
            パディング: 1em;
            オーバーフロー: 非表示;
            /* 境界線をドラッグできます*/
            サイズ変更: 両方;
            フォント: 100%/1.6 Baskerville、Palatino、セリフ体;
        } 

ここに画像の説明を挿入
連続画像境界

グラデーションパターンを使用して封筒スタイルの境界線を実現することもできます。コード例

グラデーションパターンを使用して封筒スタイルのボーダーを作成することもできます

<p class="envelope-border">グラデーション パターンを使用して封筒スタイルの境界線を作成することもできます</p>
.封筒の境界線{
    パディング: 1em;
    境界線: 0.5em 透明実線;
    背景: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
    最大幅: 20em;
    フォント: 100%/1.6 Baskerville、Palatino、serif;} 

ここに画像の説明を挿入

封筒の縁取り効果図

CSS でさまざまな境界線を実装するためのヒントに関するこの記事はこれで終わりです。CSS 境界線に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linux でファイルのユーザーとグループを変更する方法

>>:  負のz-indexを持つ要素がクリックできない問題の解決策

推薦する

Mysql でサーバーの UUID を変更する方法

問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...

JavaScript のドキュメント オブジェクト モデル (DOM)

目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...

MySQL 面接の質問: ハッシュ インデックスの設定方法

B-Tree インデックスに加えて、MySQL は次のインデックスも提供します。ハッシュインデックス...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

Ubuntuのpython3でvenvを使用して仮想環境を作成する

1. 仮想環境はプロジェクトに従い、単一のプロジェクト用の仮想環境を作成します(Python 3.4...

CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...

Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順

最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

Dockerは終了状態で起動します

docker run後、ステータスは常にExitedになります解決:パラメータを追加: -it do...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...