CSS恰当完成自融入隔开线的N种方式

日期：2020-12-12 类型：科技新闻 

关键词：在线网页制作，建网页，个人简介网页制作，简单网页，建立网页

切分线是网页页面中较为普遍的1类设计方案了，例如说知乎的更多回应

这里的自融入是指两侧的横线会伴随着文本的个数和父级的宽度自融入

悄悄的看了1下知乎的完成，很明显是用1块白色情况遮盖的，加1点情况就露馅了

心想：知乎的前端开发也不如何？ 将会他人的关键不在这些上面吧

下面例举几种更好的完成方法，不容易露馅的那种

1.伪元素+transform:translateX(⑴00%);

关键基本原理是设定文字垂直居中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: ⑴0px;
    transform: translateX(⑴00%);
}
.title::after{
    margin-left: 10px;
}

CSS隔开线 （伪元素+transform）

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）

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, ⑼999px 0, ⑼999px 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）

4.伪元素+right:100%

这个完成必须多1层标识，外界依然是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%）

5. border+transform

这个思路能够无需到伪元素，但是必须附加的标识，给內部文字上下充足大的1px边框，此时必须设定line-height:1px，因为內部总体和充足大了（超出父级），可使用肯定精准定位和transform: translateX(⑸0%)垂直居中

实际完成以下

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(⑸0%);
    white-space: nowrap;
    line-height: 1px;
    border-left: 9999px solid #ccc;
    border-right: 9999px solid #ccc;
    padding: 0 10px;
}

CSS隔开线 （border+transform）

6.伪元素+border+left/right

这个思路只必须1个伪元素，在文字內部转化成1个伪元素，运用充足大的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: ⑼999px;
    left: ⑼999px;
}

CSS隔开线 （伪元素+border+left/right）

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）

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）

小结

上面1共例举了8中方法来完成隔开线的实际效果，每种方式思路不尽相同，关键的是能够发散自身的想像力，将会这才是CSS与别的語言所不一样的吧~

这里梳理了1下，总体实际效果以下，可浏览这里查询，大伙儿在具体新项目中可自主选择所必须的方法

总结

以上所述是网编给大伙儿详细介绍的CSS恰当完成自融入隔开线的N种方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：html5+CSS3+JS完成7夕言情作用编码 返回下一篇：CSS画心形的3种方式