在 CSS 中，我們可以使用背景框來為 HTML 元素設置背景顏色、圖片或者邊框。但是有時候，我們可能需要在背景框下面再添加一個框來實現更特殊的效果。以下是一些實現這種效果的方法。

/* 方法 1：使用 ::before 或 ::after 偽元素來添加下框 */
.box {
position: relative;
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ccc;
}
.box::before {
content: "";
position: absolute;
bottom: -10px;
left: 10px;
width: calc(100% - 20px);
height: 0;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
/* 方法 2：使用陰影實現下框 */
.box {
background-color: #f5f5f5;
border: 1px solid #ccc;
box-shadow: 0 10px 0 -9px red;
}
/* 方法 3：使用背景圖片實現下框 */
.box {
background-color: #f5f5f5;
border: 1px solid #ccc;
background-image: linear-gradient(to bottom, transparent 1px, red 1px);
background-position: bottom left;
background-size: 100% 2px;
background-repeat: no-repeat;
}

方法 1 是使用 ::before 或 ::after 偽元素來實現下框。通過設置 bottom 屬性來控制偽元素的位置，再通過設置 width、height 和 border 實現下框效果。

方法 2 則是通過使用 box-shadow 屬性來實現下框效果。我們可以設置一個與元素寬度相等、高度為負的陰影，來模擬下框的形狀。

方法 3 最后是通過使用背景圖片來實現下框效果。我們可以使用漸變背景圖片，讓底部的紅色直線與灰色背景融合，并且不會影響元素的高度。