如何使用基本的HTML元素在邊界中添加文本

許多HTML元素雖然功能性，但具有與現代Web Design Aesthetics衝突的默認樣式。<fieldset></fieldset>和<legend></legend>，通常用於分組表單控件，提供了一種獨特的解決方案來創建邊界文本。這種組合本質地將文本定位在邊界內，而沒有邊框線相交。本文展示了一種簡單而有效的方法，可以利用此功能來創建時尚的邊境文本設計。

我們將使用四個<fieldset></fieldset>元素，每個元素包含一個<legend></legend>邊界文本的元素。核心原理涉及操縱這些元素的邊界和定位以達到所需的效果。

首先，我們堆疊<fieldset></fieldset>元素，應用樣式控制邊界。只有每個的頂端<fieldset></fieldset>將可見；其他人變得透明。我們還利用box-sizing: border-box來確保尺寸穩定，包括邊框和填充。可以使用各種佈局方法（例如網格）來實現堆疊。

洗手

分開

戴口罩

待在家裡

身體 {
  顯示：網格；
  保證金：自動；
  邊距：計算（50VH -170PX）;
  寬度：300px;
  身高：300px;
}

fieldSet {
  邊界：10px實心透明；
  邊界彩色：黑色；
  盒子大小：邊框框；
  網格區域：1/1；
  填充：20px;
  寬度：繼承；
}

為了創建側面和底部邊界，我們旋轉最後三個<fieldset></fieldset>使用CSS變換的元素：

 / *旋轉向右 */
fieldSet：nth-​​type（2）{變換：旋轉（90DEG）; }
/ *旋轉到底部 */
fieldSet：nth-​​type（3）{變換：旋轉（180DEG）; }
/ *向左旋轉 */
fieldSet：nth-​​type（4）{變換：旋轉（-90deg）; }

接下來，我們為<legend></legend>元素。至關重要的是，小或零line-height對於精確邊界對準至關重要。較大的線高可以使邊界取代，從而破壞設計。我們還使用CSS變換來糾正底部的方向<legend></legend>元素，由於父母的旋轉而倒置<fieldset></fieldset>。

傳奇 {
  字體：15pt/0'Averia serif libre';
  保證金：自動；
  填充：0 4px;
}

fieldSet：nth-​​type（3）>傳奇{
  變換：旋轉（180攝氏度）；
}

將圖像添加到第一個<fieldset></fieldset>增強設計。可以使用margin-left和margin-right屬性調整邊界內的水平文本對齊。兩個邊距的auto值中心文本。

獎勵：可以擴展此技術以創建更複雜的形狀，例如原始示例中顯示的八角形設計。通過仔細調整旋轉，定位和邊界樣式，可以進行各種創意邊框文本設計。

以上是如何使用基本的HTML元素在邊界中添加文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！