[分享]css两边插入边线

在网页设计中，我们经常需要为页面元素加上边框，以便更清晰地展示页面内容。在 CSS 中，我们可以使用边框属性来设置元素的边框，但是边框默认都是在元素的外部绘制的。如果我们想让边框的一半在元素内部，一半...

在网页设计中，我们经常需要为页面元素加上边框，以便更清晰地展示页面内容。在 CSS 中，我们可以使用边框属性来设置元素的边框，但是边框默认都是在元素的外部绘制的。如果我们想让边框的一半在元素内部，一半在元素外部绘制，该怎么做呢？这时候我们可以使用 CSS 两边插入边线的技巧。

HTML 代码如下：

<div class="border">
  这里是元素内容
</div> 

使用 CSS 两边插入边线的样式代码如下：

.border {
  position: relative;
  padding: 10px;
  border: 1px solid #ccc;
}

.border:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background: #ccc;
}

.border:after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: #ccc;
} 

首先设置包裹元素的 position 为 relative，这样后面绝对定位的元素会以此为参考。然后设置 padding 和 border，这里的 padding 可以根据实际情况而定。接下来使用 :before 和 :after 伪元素来插入边线。其中 :before 表示在元素内容之前插入，:after 表示在元素内容之后插入。我们设置这两个元素的 position 为 absolute，top 和 left 可以让左边的边线与包裹元素的上边对齐，right 可以让右边的边线与包裹元素的上边对齐。width 设置为 1px，height 设置为 100% 可以让边线高度与包裹元素一致。最后设置 background 即可。

通过以上代码，我们已经成功实现了 CSS 两边插入边线的效果。你可以根据自己的需要来调整 padding 、border 和边线颜色，让页面呈现出更丰富的效果。