CSS/HTML代码中Bottom Border不生效问题求助

问题分析 #

从你的代码来看，你给.card元素设置了border-bottom:10px solid #a491f1但无法正常显示，可能的原因包括：

• 默认box-sizing: content-box导致边框超出设定的宽度范围，视觉上可能被截断或位置不符合预期
• 边框颜色与卡片背景色对比度较低，导致难以分辨
• 可能误将边框添加到了不符合需求的元素上

解决方案 #

方案1：确保.card的底部边框正常显示

如果你的需求是给整个卡片添加底部边框，只需调整以下两点：

1. 添加box-sizing: border-box，让边框和内边距包含在设定的width内，避免元素尺寸超出预期
2. 调整边框颜色为注释中指定的#d8cefe，增强与背景色#ddebf8的对比度

修改后的CSS代码：

body {
    margin: 20px;
}

.avatar {
    width: 150px;
}

.card {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #ddebf8;
    color: #2b2839;
    border-bottom:10px solid #d8cefe;
    box-sizing: border-box; /* 新增：确保边框包含在宽度内 */
}

.borderblue{
    border: 1px dotted blue;
}

方案2：给内部的.borderblue元素添加底部边框

如果你的需求是给卡片内的某个子元素（比如文字区域）添加底部边框，可以针对目标元素单独设置：

/* 给第二个.borderblue元素（文字区域）添加底部边框 */
.borderblue:last-child {
    border: none; /* 移除原有虚线边框（可选） */
    border-bottom: 10px solid #d8cefe;
    padding-bottom: 10px; /* 可选：增加内边距，让边框与文字保持距离 */
}

内容的提问来源于stack exchange，提问作者Adhayan Sharma