前段時間在做項目迭代的時候遇到一個需求，其中包含一條分割線，大致大概長這樣：

然后我就看到項目之前實現分割線的方法，基本都是這樣實現的：

<div>物料下載(僅內網可下載)</div> div{height: 40px;line-height: 40px;text-align: center;font-size: 12px;color: #ccc;position: relative;margin-bottom: 15px;&::before {content: '';position: absolute;left: -20px;top: 19px;z-index: 1;background-color: #ddd;width: 35%;height: 1px;}&::after {content: '';position: absolute;right: -20px;top: 19px;z-index: 1;background-color: #ddd;width: 35%;height: 1px;} }

于是乎，我就搜了一下，發現大家好像都是這樣實現分割線的，于是，我就暗戳戳地用自己的方法來實現了一套"華麗麗"的【分割線】，以下是我的實現方法：

<fieldset><legend>物料下載(僅內網可下載)</legend> </fieldset>

當我不加任何樣式的時候，它長這樣

現在，我們再來稍微來給它加點樣式康康:

fieldset {border: 0;border-top: 1px solid #ddd;text-align: center;legend {padding: 0 5%;} }

當當當當，就這幾行樣式，就可以呈現出和之前方案一模一樣的效果啦，是不是一下子少了很多工作量？
這兩種實現方式你都可以在我建的這codePen項目中看到。

最后，我們再來說說這里的fieldset 和 legend標簽：

上面截圖是MDN中對它的解釋和用法。

我們可以看到，其實fieldset標簽是用來呈現分組樣式的，一般我們可能會用在表單里多一些，fieldset標簽不僅可以包裹legend元素，還有其他元素可以包裹，只是legend的呈現形式就會像這個組的標題一樣，當時想到用這個實現分割線是因為很早之前學html的時候記得有這個屬性，但一直沒有在實踐中用到過它，因為它的樣式大多時候并不能滿足我們的UI設計，但那天突發奇想，抱著試試的態度，居然真的找到了它的“最佳實踐”，哈哈哈，推薦給大家呀~

也歡迎大家關注我，一起學習，一起進步呀：

B站(短視頻類，基本控制在10分鐘內，講解清楚一個小的知識點)：web前端aliveAmy

CSDN: aliveAmy

掘金(之前沒怎么用過掘金，但以后也會在上面更新啦): aliveAmy

有任何疑問也可以發郵件給我，看到后會及時回復大家： aliveAmy719@gmail.com

總結

以上是生活随笔為你收集整理的可能是最优雅的分割线实现方式CSS实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。