为何添加border-radius后侧边栏仍无法显示圆角？

一、搞定侧边栏圆角不生效的问题 #

问题出在两点：

1. .sidenav 没设置背景色，就算加了border-radius也看不到容器的圆角
2. .sidenav a 里的width:120%和float:left让链接直接超出容器，把圆角给盖住了

修改代码：

• 给.sidenav加背景色，保留overflow:hidden（防止内部元素突破圆角）：

.sidenav {
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100vh;
    border-radius: 10px;
    overflow: hidden; /* 用hidden比auto更适合，避免不必要的滚动条 */
    font-size: 18px;
    background-color: #8b7484; /* 和链接原背景色一致，或者换你想要的颜色 */
}

• 删掉.sidenav a里的float:left和width:120%，让链接自适应容器宽度：

.sidenav a {
    display: block;
    color: #ddd;
    text-align: left; /* 左对齐更符合导航的视觉习惯 */
    padding: 16px 18px;
    text-decoration: none;
    /* 移除background-color，父容器已经统一设置了 */
}

• 要是想让导航项之间有分隔，加个顶部边框就行：

.sidenav a + a {
    border-top: 1px solid rgba(255,255,255,0.1);
}

二、给导航项加图标 #

有两种简单的方法：

方法1：用CSS伪元素加Unicode图标 #

直接在链接前加字符图标，不用外部依赖：

.sidenav a:before {
    content: "📁 "; /* 替换成你需要的图标，比如📄、🔍都行 */
    margin-right: 8px; /* 图标和文字留些间距 */
}

方法2：用图标标签直接插入 #

在HTML的导航链接里加img标签，适合用自定义图标：

<a href="#"><img src="你的图标路径.png" alt="导航图标" style="width:20px; vertical-align:middle;"> 导航项名称</a>

记得给图标设置合适的宽度，加vertical-align:middle让图标和文字对齐。

内容的提问来源于stack exchange，提问作者Regine Fontanilla