以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、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 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...
「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...
1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...
時間フィールドは、データベースの使用時によく使用されます。よく使われるのは作成時間と更新時間です。し...
目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...
改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...
前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...
目次refとは何かrefの使い方DOM要素に配置するクラスコンポーネントに配置する関数コンポーネント...
1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...
Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...