[分享]css两个边框怎么重叠

在CSS中，你可以使用border属性为元素添加一个边框。通常情况下，每个元素只能添加一个边框。但是，有时候你想为元素添加不止一个边框，这时候该怎么做呢？ 其实，CSS提供了两种方式来实现为元素添加两...

在CSS中，你可以使用border属性为元素添加一个边框。通常情况下，每个元素只能添加一个边框。但是，有时候你想为元素添加不止一个边框，这时候该怎么做呢？
其实，CSS提供了两种方式来实现为元素添加两个边框的效果，即使用box-shadow属性和outline属性。
第一种方式：使用box-shadow属性
使用box-shadow属性可以为元素添加一个投影效果，并让这个投影看起来像是一个额外的边框。下面是一段CSS代码示例：

p {
  border: 1px solid #000;
  box-shadow: 
    0 0 0 2px #f00,
    0 0 0 4px #0f0;
} 

上述代码为p元素添加了一个黑色边框，然后为其添加了两个box-shadow属性，其中第一个属性值为“0 0 0 2px #f00”，它表示一个2像素宽的红色投影；第二个属性值为“0 0 0 4px #0f0”，它表示一个4像素宽的绿色投影。这样一来，p元素就会有两个像边框一样的效果，一个红色的，一个绿色的。
第二种方式：使用outline属性
outline属性也可以为元素添加一个额外的边框效果。例如：

p {
  border: 1px solid #000;
  outline: 2px solid #f00;
} 

上述代码为p元素添加了一个黑色边框，然后为其添加了一个红色的outline属性，它的值为“2px solid #f00”。这样一来，p元素就会有两个像边框一样的效果，一个黑色的，一个红色的。
可是，当你使用两种方式中的任意一个时，你会发现两个边框并没有完全重叠在一起，它们之间会留出一部分间隔。这是因为border和outline属性相互独立，它们并没有同步，因此无法完美地重叠在一起。
如果你希望两个边框能够紧密地连接在一起，那么你可以将它们的值设为相同，例如：

p {
  border: 2px solid #f00;
  box-shadow: 0 0 0 2px #f00;
  outline: 2px solid #f00;
} 

上述代码为p元素添加了一个2像素宽的红色边框、一个2像素宽的红色投影和一个2像素宽的红色outline属性。这样一来，这三个效果就会完美地重叠在一起，形成一个类似于双倍粗的边框效果。
总之，使用box-shadow属性和outline属性是在元素添加额外边框的两种比较方便的方法，如果希望它们能完美地重叠在一起，就需要将它们的值都设为相同值。