CSS實現自適應分隔線的N種方法

来源:https://www.cnblogs.com/zml1023/archive/2019/12/23/12083153.html
-Advertisement-
Play Games

分割線是網頁中比較常見的一類設計了，比如說知乎的更多回答 這裡的自適應是指兩邊的橫線會隨著文字的個數和父級的寬度自適應 偷偷的看了一下知乎的實現，很顯然是用一塊白色背景覆蓋的，加一點背景就露餡了 心想：知乎的前端也不怎麼樣？ 可能別人的重點不在這些上面吧 下麵列舉幾種更好的實現方式，不會露餡的那種 ...


分割線是網頁中比較常見的一類設計了，比如說知乎的更多回答

image

這裡的自適應是指兩邊的橫線會隨著文字的個數和父級的寬度自適應

偷偷的看了一下知乎的實現，很顯然是用一塊白色背景覆蓋的，加一點背景就露餡了

image

心想：知乎的前端也不怎麼樣？ 可能別人的重點不在這些上面吧

下麵列舉幾種更好的實現方式，不會露餡的那種

1.偽元素+transform:translateX(-100%);

　　主要原理是設置文本居中text-align: center;，然後給定兩個偽元素，分別絕對定位，那麼此時偽元素也是跟隨著水平居中的，設置足夠的寬度，然後把左邊的往左位移100%就可以了，父級記得超出隱藏。

具體實現如下

html結構為

<div class="title">我是分割線</div>

css樣式為

.title{
    position: relative;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    color: #999;
}
.title::before,.title::after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    background: #ccc;
    top: 50%;
}
.title::before{
    margin-left: -10px;
    transform: translateX(-100%);
}
.title::after{
    margin-left: 10px;
}

點擊查看效果 CSS分隔線 （偽元素+transform） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

2.偽元素+flex

這個比較好理解了，設置display:flex，然後兩個偽元素分別鋪滿剩餘空間。

具體實現如下

html結構為

<div class="title">我是分割線</div>

css樣式為

.title{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
}
.title::before,.title::after{
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc;
}
.title::before{
    margin-right: 10px;
}
.title::after{
    margin-left: 10px;
}

點擊查看效果 CSS分隔線 （偽元素+flex） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

3.偽元素+box-shadow/outline+clip-path

同樣利用text-align: center使文本和偽元素居中，然後生成足夠大的box-shadow或者outline，由於不支持單個方向，所以用clip-path或者clip裁剪掉

具體實現如下

html結構為

<div class="title">我是分割線</div>

css樣式為

.title{
    text-align: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
}
.title::before,.title::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    box-shadow: 0 0 0 9999px #ccc;
    vertical-align: middle;
}
.title::before{
    margin-right: 10px;
    clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);
}
.title::after{
    margin-left: 10px;
    clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);
}

點擊查看效果 CSS分隔線 （偽元素+box-shadow/outline+clip-path）

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

4.偽元素+right:100%

這個實現需要多一層標簽，外部仍然是text-align: center，內部文本里添加兩個偽元素絕對定位，其中左邊的設置距離右邊100%（相對於文本標簽）即可

具體實現如下

html結構為

<div class="title">
    <span class="inner">我是分割線</span>
</div>

css樣式為

.title{
    text-align: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
}
.inner{
    position: relative;
}
.inner::before,.inner::after{
    position: absolute;
    content: '';
    width: 9999px;
    height: 1px;
    background: #ccc;
    top: 50%;
}
.inner::before{
    right: 100%;
    margin-right: 10px;
}
.inner::after{
    margin-left: 10px;
}

點擊查看效果 CSS分隔線 （偽元素+right:100%） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

5. border+transform

這個思路可以不用到偽元素，不過需要額外的標簽，給內部文本左右足夠大的1px邊框，此時需要設置line-height:1px，由於內部整體以及足夠大了（超過父級），可以使用絕對定位和transform: translateX(-50%)居中

具體實現如下

html結構為

<div class="title">
    <span class="inner">我是分割線</span>
</div>

css樣式為

.title{
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
    padding: .6em 0;/**把高度撐起來**/
}
.inner{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    line-height: 1px;
    border-left: 9999px solid #ccc;
    border-right: 9999px solid #ccc;
    padding: 0 10px;
}

點擊查看效果 CSS分隔線 （border+transform） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

6.偽元素+border+left/right

這個思路只需要一個偽元素，在文本內部生成一個偽元素，利用足夠大的border和相同的負值（絕對定位+left/right）還原位置

具體實現如下

html結構為

<div class="title">
    <span class="inner">我是分割線</span>
</div>

css樣式為

.title{
    text-align: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
}
.inner{
    position: relative;
    padding: 0 10px;
}
.inner::before{
    content: '';
    position: absolute;
    height: 1px;
    top: 50%;
    border-left: 9999px solid #ccc;
    border-right: 9999px solid #ccc;
    right: -9999px;
    left: -9999px;
}

點擊查看效果 CSS分隔線 （偽元素+border+left/right） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

7.偽元素+table-cell

主要思路為父級設置display:table，偽元素設置display:table-cell，並設置足夠大的寬度即可

具體實現如下

html結構為

<div class="title">
    <span class="inner">我是分割線</span>
</div>

css樣式為

.title{
    display: table;
    font-size: 14px;
    color: #999;
}
.inner{
    display: table-cell;
    white-space: nowrap;
    padding: 0 10px;
}
.title::before,.title::after{
    content: '';
    display: table-cell;
    width: 9999px;
    overflow: hidden;
    background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**這裡用線性漸變生成的，也可以用其他方式**/
    background-size: 100% 1px;
}

點擊查看效果 CSS分隔線 （偽元素+table-cell） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

8.fieldset+legend

利用fieldset和legend標簽組合，可以天然實現分隔線效果，參考至張鑫旭的這篇文章

具體實現如下

html結構為

<fieldset class="title">
    <legend class="inner">我是分割線</legend>
</fieldset>

css樣式為

.title{
    font-size: 14px;
    color: #999;
    border: 0;
    border-top: 1px solid #ccc;
    padding: 0;
}
.inner{
    margin: 0 auto;;
    padding: 0 10px;
}

點擊查看效果 CSS分隔線 （fieldset+legend） 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

小結

上面一共列舉了8中方式來實現分隔線的效果，每種方法思路各不相同，重要的是可以發散自己的想象力，可能這才是CSS與其他語言所不同的吧~

這裡整理了一下，整體效果如下，可訪問這裡查看，大家在實際項目中可自行選取所需要的方式

image

可能還有其他方式沒有想到，歡迎大家集思廣益，在下方留言討論


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS核心動畫高級技巧 - 8
    iOS核心動畫高級技巧 - 1 iOS核心動畫高級技巧 - 2 iOS核心動畫高級技巧 - 3 iOS核心動畫高級技巧 - 4 iOS核心動畫高級技巧 - 5 iOS核心動畫高級技巧 - 6 iOS核心動畫高級技巧 - 7 15. 圖層性能 圖層性能 要更快性能，也要做對正確的事情。 ——Steph ...
  • js獲取時間差值
    1 function GetTime(firstDate, secondDate) { 2 // 1.對事件進行處理 3 var firsttime = Date.parse(firstDate + " 00:00:00"); 4 var secondtime = Date.parse(second ...
  • jstree設置checkbox單選
    jstree設置插件checkbox只允許單選 jstree version 3.3.8 單選配置參數： $.jstree.defaults.core.multiple 示例： ...
  • HTML 語法簡要總結
     HTML基本語法 認識網頁 網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。 常見瀏覽器內核介紹 瀏覽器是網頁運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。 ...
  • 內網穿透、iis配置、natapp配置、
    內網穿透 相信很多人都會想把自己的電腦做成伺服器，然後掛上網站，讓別人可以訪問自己的網站。的這種想法，恰好，我前幾天學會了個可以把自己電腦做成伺服器，把網頁發佈到外網可以讓別人訪問的方法。 前幾天在弄支付寶掃碼支付，因為一直看不懂官方寫的引用文檔，百度的教程也看不懂，然後就去騰訊課堂看關於支付寶掃碼 ...
  • vue起步
    1.vue構造器： var v=new Vue({ ......... }) <div id="d1"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/ ...
  • js中保存成圖片並下載
    1、保存canvas中繪製的內容為圖片 HTML代碼： <canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> js代碼： var arr = [ {locat ...
  • css之文本兩端對齊
    說起text-align，大家一定都不覺得陌生，我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊，當然我們也使用justify來實現文本兩端對齊。 如上圖，兩端對齊相對於左對齊，視覺上顯得整齊有序。但justify對最後一行無效，通常這樣的排版對整段文字是極好的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類