CSS中提供了多種方式為元素添加邊框，其中最常見的是使用border屬性。通過設(shè)置不同的屬性值，可以實現(xiàn)不同的邊框樣式。

.box {
border: 1px solid #ddd; /* 1像素實線邊框，顏色為灰色 */
}

除了solid外，border屬性還可以取dashed、dotted、double、groove、ridge、inset、outset等值，分別對應(yīng)不同的邊框樣式。在設(shè)置邊框時，可以只指定某一邊，也可以同時指定四個方向。

.box {
border-top: 1px dashed #999; /* 頂部為1像素虛線邊框，顏色為深灰色 */
border-bottom: 2px dotted #666; /* 底部為2像素點狀邊框，顏色為淺灰色 */
border-left: 3px double #333; /* 左側(cè)為3像素雙線邊框，顏色為深黑色 */
border-right: 4px groove #000; /* 右側(cè)為4像素凹陷邊框，顏色為純黑色 */
}

除了border外，CSS還提供了outline屬性用于添加元素外部的邊框。與border不同的是，outline的邊框不占據(jù)空間，不影響元素的大小和位置。

.box {
outline: 1px dotted #c00; /* 1像素點狀紅色外邊框 */
}

在實際應(yīng)用中，可以將邊框嵌套在元素內(nèi)部，形成框里加框的效果。這通常需要設(shè)置較低的z-index值以保證內(nèi)部邊框在外部邊框之下。

.outer-box {
border: 1px solid #999;
position: relative;
z-index: 1;
}
.inner-box {
border: 1px solid #ccc;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
}

如上代碼所示，外層元素.outer-box設(shè)置1像素實線邊框，內(nèi)部元素.inner-box設(shè)置1像素實線邊框，同時通過position:absolute和top/left/right/bottom屬性將其定位在外層元素內(nèi)部，并將z-index設(shè)置為-1，表示該元素在層疊上下文中比外層元素更低。這樣就實現(xiàn)了框里加框的效果。