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)