CSS 描邊效果是一種常見的裝飾效果，它可以給頁面元素增加邊框或者輪廓線，提高頁面的可讀性和美觀度。在 CSS 中，我們可以使用 border 屬性來設置元素的邊框，也可以使用 outline 屬性來設置元素的輪廓線。但是，這些屬性都有一個問題：無法實現固定居中的效果。那么，在這個問題面前，我們該如何解決呢？

/* 使用 box-shadow 實現內邊框效果 */
.box1 {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 0 0 0 2px #f00 inset;
}
/* 使用偽元素實現外邊框效果 */
.box2 {
width: 200px;
height: 100px;
background-color: #fff;
position: relative;
}
.box2::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid #f00;
z-index: -1;
}
/* 使用偽元素實現輪廓線效果 */
.box3 {
width: 200px;
height: 100px;
background-color: #fff;
position: relative;
}
.box3::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
outline: 2px solid #f00;
}

上面的代碼演示了三種實現描邊效果的方法，其中，box1 使用了 box-shadow 屬性實現內邊框效果，box2 使用了偽元素實現外邊框效果，box3 使用了偽元素實現輪廓線效果。這三種方法都可以實現描邊的效果，而且都可以固定居中，非常實用。

當然，如果您還有其他優秀的實現方法，也可以在評論區留言，分享給大家。