[分享]css中如何让边框置顶

CSS中有时候我们需要让边框置顶，以便让元素更加美观，这里介绍几种方法。

/* 方法一：使用box-shadow */
.element {
  box-shadow: 0 0 0 2px #000;
} 

使用box-shadow可以让元素拥有一个宽度为2px的黑色阴影，看起来就像是边框一样，而且不会占用元素的宽度和高度。

/* 方法二：使用outline */
.element {
  outline: 2px solid #000;
} 

使用outline也可以让元素拥有一个宽度为2px的黑色边框，但是它会占用元素的宽度和高度。

/* 方法三：使用伪元素 */
.element {
  position: relative;
}
.element::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #000;
  z-index: -1;
} 

使用伪元素可以让元素拥有一个宽度为2px的黑色边框，并且不会占用元素的宽度和高度。注意要将伪元素的z-index设为-1，以便让元素在伪元素之上。