Npcink Blog
切换菜单

怎么画竖线？ - css 笔记

我们可以用 CSS 来画一个，那么一些颜色、宽度、边距啥的属性都可以轻松的自定义，用起来也很方便

最后更新于
本页目录3 节

在平时的网页布局中，我们经常会用到竖线来进行一些有趣的分割，如果只是单纯的用符号来做，那么一些颜色、宽度、边距啥的都不怎么方便，这个时候我们可以用 CSS 来画一个，这些属性都可以轻松的自定义。

实际效果如下：

<div class="nbox-main">
  <div class="nbox-yue">举杯邀明月，对影成三人。</div>
  <br>
  这段话的末尾有一条红色竖线<span></span>好了，没了
</div>


<style type="text/css">


  .nbox-main span {
    border-right: 2px solid #b52424;/*粗细、样式、颜色*/
    margin: 0 10px;/*边距*/
    padding-top: 4px;/*长度*/
  }


  .nbox-yue::after {
    content: "";
    border-right: 3px solid #111;/*粗细、样式、颜色*/
    margin: 0 20px;/*边距*/
    padding-top: 20px;/*长度*/
  }


</style>

HTML:

<div class="nbox-main">
  <div class="nbox-yue">举杯邀明月，对影成三人。</div>
  <br>
  这段话的末尾有一条红色竖线<span></span>好了，没了
</div>

CSS:

<style type="text/css">


.nbox-main span {
  border-right: 2px solid #b52424;/*粗细、样式、颜色*/
  margin: 0 10px;/*边距*/
  padding-top: 4px;/*长度*/
}


.nbox-yue::after {
  content: "";
  border-right: 3px solid #111;/*粗细、样式、颜色*/
  margin: 0 20px;/*边距*/
  padding-top: 20px;/*长度*/
}


</style>