首页 > 代码库 > 积跬步，聚小流-------几种方法实现分割线

积跬步，聚小流-------几种方法实现分割线

2024-08-07 12:58:08   223人阅读

其实这个问题想了实现了有一段时间了，只是单纯自己想了个办法简单实现了效果，没想出太多办法来，最关键的是，我也不知道这原来是叫“分割线”，只知道是什么样，连搜都不着知道怎么搜，赶巧今天碰到了，就学习了下，先来描绘下要实现的“分割线”效果。


对，就是这个效果，记住了，这叫“分割线”...


最开始反应过来的是层叠起来实现效果，也是之前一直在用的方法

<hr width="80%"/>
<div style="position: relative;top: -40px;background-color: white;width: 200px;"><h1>登 录</h1></div>
今天又学习了另外几个方法，小有收获

<div class="line_divide"><h1>登 录</h1></div>
然后进行样式设定

.line_divide{
    padding: 0 20px;
    margin: 0 80px 0;
    line-height: 1px;
    border-left: 240px solid #ddd;
    border-right: 240px solid #ddd;
    text-align: center;
}
这个看起来是不是很高大上啊，再来看个更简洁的

<div class="line_divide">———————————<span><h1>登 录</h1></span>————————————</div>
一般来说，最先反应过来的是不是都是直接加“-”就好了呢，但是没办法“-”和“-”之间总有一些间隔，这就美中不足了，但是如果中间的间隔空隙没有了呢，然后就学到了一个新的样式

.line_divide{
    letter-spacing: -3px;
    color: #ddd;
}
.line_divide span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}
letter-spacing:字母间距，所有浏览器都支持，允许为负值，可以为默认值、设定固定值和父类继承的值（不兼容IE），w3cschool就是这么写的，好东西啊。

虽然说这几个方法已经很好的达到了所想要的需求，但是同时看到了一个麻烦点，但是也学到了不少东西的一个方法：

<div class="line_divide"><b></b><span><h1>登 录</h1></span><b></b></div>
再来看下它的样式

.line_divide{
    width:600px;
}
.line_divide b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.line_divide span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
    text-align: center;
}
这是看到的原代码，里面看到了两个非常棒的样式啊，vertical-align和display:inline-block，突然仿佛回到了刚开始学习的时候，都用过的啊，用在这里，妙不可言啊


要睡了，这屋里没有暖气真要人命啊，感觉手要冻了...








积跬步，聚小流-------几种方法实现分割线


联系
我们