Detailed explanation of various methods to implement separation lines in CSS

This article describes how to implement separators in CSS in various ways. Separators can play a beautiful role when we write front-end pages. There are many ways to implement separators in CSS, so let’s take a look. How to use css to achieve a more beautiful view of the divider!

A single tag implements the separator line:

html:

<p class="line_01">小小分隔线 单标签实现</p>

css:

.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}

Advantages: Simple code

##Smart use of background color to achieve separation lines:

html:

##

<p class="line_02"><span>小小分隔线 巧用色实现</span></p>

css:

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

Advantages: Simple code, adaptive widthinline-block implements the dividing line:

html:

<p class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></p>

css:

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}

Floating implementation separator line:

html:

##

<p class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></p>

css:

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

Use characters to implement separators:

html:

<p class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</p>

css:

.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

Advantages: The code is concise. The above briefly introduces how to write separators. There may be other more suitable ways to write them. It depends on the environment and what you need!

Only through comparison can we find out who is better. You can implement all these codes and make a comparison!

Related recommendations:

How to set separators and double solid lines in css

How to use CSS to implement separators

The above is the detailed content of Detailed explanation of various methods to implement separation lines in CSS. For more information, please follow other related articles on the PHP Chinese website!