<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        生僻標簽 fieldset 與 legend 的妙用

        chokcoco

        談到 <fieldset><legend>,大部分人肯定會比較陌生,在 HTML 標簽中,屬于比較少用的那一批。

        我最早知道這兩個標簽,是在早年學習 reset.css 或者 normalize.css 時,在這些重置統一代碼默認樣式的 CSS 中看到的。最近因為研究邊框,遇到了這兩個標簽,發現它們還是很有意思的,遂起一篇,將整理的一些知識點分享給大家。

        了解 <fieldset><legend>

        通常而言,<fieldset><legend> 比較常用在表單當中。

        • <fieldset>:HTML <fieldset> 元素用于對表單中的控制元素進行分組
        • <legend>:在 <fieldset> 中內置了一個 <legend> 元素作為 fieldset 的標題

        簡單而言,fieldset 可以單獨使用,對表單的元素進行分組,而 legend 則需要和 fieldset 配套使用,成對出現,作為分組的標題。

        看個簡單的例子,簡單的 HTML 及結構如下:

        <fieldset>
            <legend>Form</legend>
            <div>
                <label>Name :</label><input type="text" placeholder="input Name" />
            </div>
            <div>
                <label>Password :</label><input type="text" placeholder="input Name" />
            </div>
        </fieldset>
        fieldset {
            border: 1px solid#ddd;
            padding: 12px;
        }
        
        legend {
            font-size: 18px;
            padding: 0 10px;
        }

        效果如下:

        CodePen Demo -- fieldset & legend Demo

        比較有意思的點在于,如果給 fieldset 設置了 border 邊框,則 legend 元素內的內容則會作為分組的標題,嵌入 border 內。

        控制 legend 的位置及樣式

        對于 legend 的位置和樣式,是可以進行控制的。

        對于位置,我們可以通過 margin 和 父元素的 padding 進行控制,如果父元素 fieldset 不設置 padding ,legend 不設置 margin ,則 legend 默認定位在最左側。

        fieldset {
            border: 1px solid#ddd;
            // padding: 12px;
        }
        
        legend {
            font-size: 18px;
        }

        效果圖:

        通過改變 legendmargin 或者父元素的 padding-left ,可以控制標題的初始位置:

        fieldset {
            border: 1px groove #ddd;
        }
        
        legend {
            animation: marginMove 10s infinite alternate;
        }
        
        @keyframes marginMove {
            100% {
                margin-left: 100px;
            }
        }

        效果圖:

        通過控制 legendpadding,可以增加周圍元素的區域,讓留白更多一點。

        應用場景 -- 標題兩側橫線

        了解了上述基本知識后,我們就可以稍微開始深入,想一想,上述 <fieldset><legend> 的一些有意思的應用場景。

        最適合的場景我覺得應該就是標題兩側帶橫線的布局了。類似這樣:

        當然,這個布局的解決方式有很多,通常會使用偽元素來生成左右兩側的橫線,或者是通過絕對定位局部進行覆蓋疊加。

        這里,使用 <fieldset><legend> 非??焖俚耐瓿桑?/p>

        <div class="g-container">
            <fieldset><legend>排行榜</legend></fieldset>
        </div>
        fieldset {
            width: 300px; 
            height: 24px; 
            border: 1px solid transparent; 
            border-top-color: #000; 
        }
        
        legend{
            margin: auto; 
            padding: 0 10px; 
        } 

        fieldset 只設置上邊框,通過 margin: auto 將標題定位到中間, 通過 padding 控制兩側的留白。非常的完美。

        CodePen Demo -- fieldset & legend Demo 2

        邊框嵌套文字

        在這篇文章中 -- How to Add Text in Borders Using Basic HTML Elements,還介紹了一種非常有意思的使用場景,在邊框中嵌套文字。

        想象一下,一個 <fieldset> 元素配合一個 <legend> 元素,可以生成一個邊框嵌文字的效果,那么,將多組組合,再進行定位排布,就可以生成多邊邊框嵌套文字的效果了。

        偽代碼如下:

        <div class="g-container">
            <fieldset><legend>CSS fieldset</legend></fieldset>
            <fieldset><legend>HTML element</legend></fieldset>
            <fieldset><legend>JavaScript</legend></fieldset>
            <fieldset><legend>TypeScript</legend></fieldset>
        </div>
        .g-container {
            position: relative;
            width: 300px; 
            height: 300px; 
        }
        fieldset{
            position: absolute;
            width: 300px; 
            height: 300px; 
            border: 10px solid transparent; 
            border-top-color: #000; 
        }
        legend{
            padding: 0 10px; 
        } 
        
        fieldset:nth-of-type(2){ transform: rotate(90deg); }
        fieldset:nth-of-type(3){ transform: rotate(180deg); }
        fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 
        fieldset:nth-of-type(4){ transform: rotate(-90deg); }

        效果圖如下:

        通過多個 <fieldset><legend> 的組合,我們可以拼出一個容器的 4 個邊,組成一個非常好看的邊框嵌文字效果。

        通過給 legend 加上 animation,讓文字動起來

        legend{
            animation: move 3s infinite linear alternate;
        } 
        @keyframes move {
            100% {
                margin-left: 70px;
            }
        }

        CodePen Demo -- Border Text Design using HTML fieldset and legend

        好,基于這個,我們就可以去生成各種 N 邊形邊框嵌文字的邊框了。下面是簡單的嘗試 幾種多邊形邊框。

        CodePen Demo -- fieldset and legend generate polygon

        最后

        本文到此結束,希望對你有幫助 :),想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??

        更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

        如果還有什么疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

        閱讀 1.2k

        iCSS
        CSS 奇技淫巧,在這里,都有。

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        0 條評論

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        宣傳欄
        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕