css框里加框 |css手册 苏小雨版的

.box {
border: 1px solid #ddd; /* 1像素实线边框，颜色为灰色 */
}

除了solid外，border属性还可以取dashed、dotted、double、groove、ridge、inset、outset等值，分别对应不同的边框样式。在设置边框时，可以只指定某一边，也可以同时指定四个方向。

.box {
border-top: 1px dashed #999; /* 顶部为1像素虚线边框，颜色为深灰色 */
border-bottom: 2px dotted #666; /* 底部为2像素点状边框，颜色为浅灰色 */
border-left: 3px double #333; /* 左侧为3像素双线边框，颜色为深黑色 */
border-right: 4px groove #000; /* 右侧为4像素凹陷边框，颜色为纯黑色 */
}

除了border外，CSS还提供了outline属性用于添加元素外部的边框。与border不同的是，outline的边框不占据空间，不影响元素的大小和位置。

.box {
outline: 1px dotted #c00; /* 1像素点状红色外边框 */
}

在实际应用中，可以将边框嵌套在元素内部，形成框里加框的效果。这通常需要设置较低的z-index值以保证内部边框在外部边框之下。

.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设置1像素实线边框，内部元素.inner-box设置1像素实线边框，同时通过position:absolute和top/left/right/bottom属性将其定位在外层元素内部，并将z-index设置为-1，表示该元素在层叠上下文中比外层元素更低。这样就实现了框里加框的效果。