css如何设置2个边框

CSS是一种用于网页美化的语言，它可以帮助我们设置网页中各种元素的样式和外观。在某些情况下，我们需要为某个元素设置两个边框，此时就需要使用一些特殊的CSS技巧来实现。

    .doubled-border {
        border: 4px solid #ccc;
        padding: 10px;
        position: relative;
    }
    .doubled-border::after {
        content: '';
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border: 2px solid #000;
    }

上面的代码展示了如何用CSS设置一个拥有两个边框的元素。首先，我们使用普通的border属性为元素设置了一个4像素宽的灰色边框，并为元素设置了10像素的内边距。

接着，我们为该元素的伪元素after设置了一个绝对定位，并使用content属性将其内容设置为空。然后，我们使用border属性为这个伪元素设置了一个2像素宽的黑色边框。使用position属性和top、left、right、bottom属性将这个伪元素放置在了本来的边框内侧，并使其比正式的边框缩小了6px。由于我们为元素和伪元素都设置了边框，因此我们实现了一个拥有两个边框的效果。

需要注意的是，在设置两个边框的时候，我们需要将内层的边框放在伪元素中，并将其放置在元素内部。这样才能保证实现一个完美的双边框。