基本的なHTML要素を使用して境界にテキストを追加する方法

多くのHTML要素は、機能的ですが、最新のWebデザインの美学と衝突するデフォルトのスタイルを持っています。<fieldset></fieldset>そして<legend></legend>、通常、フォームコントロールのグループ化に使用され、境界のあるテキストを作成するためのユニークなソリューションを提供します。この組み合わせは、境界線がテキストと交差することなく、本質的に境界内にテキストを配置します。この記事では、この機能を活用してスタイリッシュなボーダーテキストデザインを作成するためのシンプルで効果的な方法を示しています。

4つを使用してデザインを構築します<fieldset></fieldset>要素、それぞれを含む<legend></legend>ボーダーテキストの要素。中核の原則には、これらの要素の境界と位置を操作して、望ましい効果を達成することが含まれます。

まず、積み重ねます<fieldset></fieldset>要素、境界線を制御するためのスタイルを適用します。それぞれの上部の境界のみ<fieldset></fieldset>表示されます。他は透明にされています。またbox-sizing: border-boxを使用して、境界線やパディングなどの一貫したサイジングを確保します。スタッキングは、グリッドなどのさまざまなレイアウト方法を使用して実現できます。

手を洗う

バラバラにしてください

マスクを着用してください

家にいる

体 {
  ディスプレイ：グリッド;
  マージン：自動;
  マージントップ：calc（50VH -170px）;
  幅：300px;
  高さ：300px;
}

fieldset {
  国境：10px固体透明。
  ボーダートップカラー：黒;
  ボックスサイズ：ボーダーボックス;
  グリッドエリア：1/1;
  パディング：20px;
  幅：継承;
}

側面と下の境界線を作成するには、最後の3つを回転させます<fieldset></fieldset>CSS変換を使用する要素：

 / *右に回転 */
フィールドセット：nth-​​of-type（2）{transform：rotate（90deg）; }
/ *下部に回転 */
Fieldset：nth-​​of-type（3）{transform：Rotate（180deg）; }
/ *左に回転 */
フィールドセット：nth-​​of-type（4）{transform：rotate（-90deg）; }

次に、スタイルを整えます<legend></legend>要素。重要なのは、正確な境界線の整列には、小型またはゼロのline-height不可欠​​です。ラインの高さが大きいと、境界線が移動し、デザインを混乱させる可能性があります。また、CSS変換を使用して底部の方向を修正します<legend></legend>その親の回転のために反転する要素<fieldset></fieldset>。

伝説 {
  フォント：15pt/0 'averia serif libre';
  マージン：自動;
  パディング：0 4px;
}

フィールドセット：nth-​​of-type（3）> legend {
  変換：回転（180deg）;
}

最初に画像を追加します<fieldset></fieldset>デザインを強化します。境界内の水平テキストアライメントはmargin-leftおよびmargin-rightプロパティを使用して調整できます。両方のマージンのauto値がテキストを中心にします。

ボーナス：この手法を拡張して、元の例に示されている八角形の設計など、より複雑な形状を作成できます。ローテーション、ポジショニング、およびボーダースタイルを慎重に調整することにより、さまざまな創造的なボーダーテキストデザインが可能になります。

以上が基本的なHTML要素を使用して境界にテキストを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。