CSS 境界線の長さ制御機能の実装

CSS 境界線の長さ制御機能の実装

以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました。後で、この効果を実現するには疑似クラスが非常に便利であることがわかりました。div は 1 つだけで十分であり、パディングとマージンの調整も面倒ではありません。

<div class="content-block">
<div class="box-container">
<div class="border-top">ボーダートップ</div>
</div>
<div class="box-container">
<div class="border-left">左ボーダー</div>
</div>
<div class="box-container">
<div class="border-right">右ボーダー</div>
</div>
<div class="box-container">
<div class="border-bottom">ボーダー下部</div>
</div>
</div>
.ボックスコンテナ{
    位置: 相対的;
    幅: 90%;
    色: #777;
}
.border-top {
    背景: #b4bcbf;
    パディング: 15px;
}
    .border-top:before {
        コンテンツ: '';
        位置: 絶対;
        左: 42%;
        上: 0;
        下部: 自動;
        右: 自動;
        高さ: 7px;
        幅: 50%;
        背景色: #8796a9;
    }
.border-left {
    背景: #dfdad6;
    パディング: 15px;
}
    .border-left:before {
        コンテンツ: '';
        位置: 絶対;
        左: 0;
        上位:6%
        下部: 自動;
        右: 自動;
        高さ: 52%;
        幅: 5px;
        背景色: #a89d9e;
    }
.border-right {
    背景: #eee9c4;
    パディング: 15px;
}
    .border-right:after {
        コンテンツ: '';
        位置: 絶対;
        左: 自動;
        上:自動;
        下: 5px;
        右: 0;
        高さ: 52%;
        幅: 5px;
        背景色: #f39c81;
    }
.border-bottom {
    背景: #bcdc9d;
    パディング: 15px;
}
    .border-bottom:after {
        コンテンツ: '';
        位置: 絶対;
        左: 18px;
        上:自動;
        下部: 0;
        右: 自動;
        高さ: 6px;
        幅: 105px;
        背景色: #32b66b;
    }

効果は以下のとおりです。

要約する

上記はエディターが導入したCSS境界線の長さ制御機能の実装です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  デザインリファレンス 美しく独創的なブログデザイン

>>:  HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

推薦する

CSS3 で z-index が効かない問題の解決方法

最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

mysqlは時間を自動的に追加し、時間を自動的に追加および更新する操作を実装します

時間フィールドは、データベースの使用時によく使用されます。よく使われるのは作成時間と更新時間です。し...

1 つの記事で Vuex を理解する

目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...

5つのCSSスクロール天井実装方法の比較(パフォーマンス向上版)

改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...

MySQL 操作: JSON データ型の操作

前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

React refの使用例

目次refとは何かrefの使い方DOM要素に配置するクラスコンポーネントに配置する関数コンポーネント...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

Nginx のアクセス制御とパラメータ調整方法

Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...