[分享]css中将两个标签之间分隔

CSS中，经常需要将两个标签之间进行分隔，实现不同的效果。下面就来介绍一些常用的分隔方法。

/* 方法一：border */
p {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

/* 方法二：伪元素（before和after） */
p::before {
  content: "";
  display: block;
  height: 1px;
  background-color: black;
  margin-bottom: 10px;
}
p::after {
  content: "";
  display: block;
  height: 1px;
  background-color: black;
  margin-top: 10px;
}

/* 方法三：box-shadow */
p {
  box-shadow: 0px -1px 0px 0px black, 0px 1px 0px 0px black;
}

/* 方法四：linear-gradient */
p {
  background-image: linear-gradient(to bottom, black 0%, black 50%, transparent 50%, transparent 100%);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: no-repeat;
} 

上述方法每种都有其适用的场景，应根据实际需求选择使用。