以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、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 トリガーの構文とアプリケーションを説明します。ご参考までに、...
この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...
効果: <div class="imgs"> <!-- 背景画...
MySQL-8.0.23 をダウンロードクリックしてダウンロード: mysql-8.0.23-li...
Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...
この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...
目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...
META タグは、HTML 言語のヘッダー領域にある補助タグです。作成者、日時、Web ページの説明...
1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...
1. RPMバージョンのインストールデータベースの他のバージョンがあるかどうかを確認し、ある場合は完...
この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...
1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...