box-shadow设置1像素边框的多种方案

在CSS中，设置边框一般用border，box-shadow属性用于给元素添加阴影效果，它本身并不直接用于创建边框。但如果想通过box-shadow属性来模拟一个1像素的边框效果，你可以利用box-shadow的几个特性来实现类似边框的外观。

方法一：使用内阴影
可以通过设置box-shadow的水平偏移、垂直偏移、模糊半径和颜色，来模拟边框效果。例如，要创建一个1像素宽的顶部边框，可以这样设置：

.box {
  box-shadow: 0 -1px 0 0 #000; /* 上边框 */
}

如果要创建一个1像素宽的底部边框，可以这样设置：

.box {
  box-shadow: 0 1px 0 0 #000; /* 下边框 */
}

可以通过调整水平偏移和垂直偏移来创建左右边框：

.box {
  box-shadow: -1px 0 0 0 #000; /* 左边框 */
  box-shadow: 1px 0 0 0 #000; /* 右边框 */
}

方法二：使用扩展阴影和内阴影结合
如果想让边框看起来更立体或者有更多的控制（比如同时显示多个边框），可以结合使用内阴影（inset）和普通阴影。例如，创建一个四周都有1像素边框的效果：

.box {
  box-shadow: 0 0 0 1px #000, /* 下边框 */
              0 -1px 0 0 #000, /* 上边框 */
              -1px 0 0 0 #000, /* 左边框 */
              1px 0 0 0 #000; /* 右边框 */
}

方法三：使用边框（border）和阴影结合

虽然这不是直接使用box-shadow来创建边框，但为了完整性，也可以提及这种方法。可以先用border属性创建一个边框，然后用box-shadow在边框外部添加阴影，从而创造出一种“立体”的边框效果：

.box {
  border: 1px solid #000; /* 基本的边框 */
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2); /* 在边框外部添加阴影 */
}

使用box-shadow模拟边框时，阴影的颜色、模糊半径（blur radius）和扩展半径（spread radius）可以根据需要调整，以达到最佳的视觉效果。