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)

推薦する

MySQL トリガー構文とアプリケーション例

この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

背景画像にテキストを表示するためのCSS

効果: <div class="imgs"> <!-- 背景画...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

CentOS7 で MySQL 5.7.24 をコンパイルしてインストールする詳細なチュートリアル

目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...

HTMLウェブページのMETAタグのコンテンツを書く際のポイント

META タグは、HTML 言語のヘッダー領域にある補助タグです。作成者、日時、Web ページの説明...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

Linux Centos7 に mysql8 をインストールするチュートリアル

1. RPMバージョンのインストールデータベースの他のバージョンがあるかどうかを確認し、ある場合は完...

MySQL におけるさまざまな一般的な結合テーブルクエリの例の概要

この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...

CentOS 7.5 が Varnish キャッシュサーバー機能を導入

1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...