使用HTML和CSS实现选中导航项带圆角边框的精美侧边栏

要实现选中链接的右侧圆角，核心思路是让选中项的背景区域突破侧边栏的右侧边界，同时设置完整的圆角样式。以下是具体实现方案：

HTML结构 #

<div class="sidebar">
  <ul class="nav-list">
    <li><a href="#" class="active">控制台</a></li>
    <li><a href="#">订单管理</a></li>
    <li><a href="#">商品库</a></li>
    <li><a href="#">客户列表</a></li>
    <li><a href="#">数据统计</a></li>
  </ul>
</div>

CSS样式 #

/* 侧边栏基础样式 */
.sidebar {
  width: 220px;
  background-color: #f0f2f5;
  padding: 24px 0;
  min-height: 100vh;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 导航链接通用样式 */
.nav-list a {
  display: block;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  border-radius: 8px 0 0 8px; /* 默认左侧圆角 */
  transition: all 0.2s ease;
}

/* 选中状态样式 */
.nav-list a.active {
  background-color: #fff;
  color: #2563eb;
  position: relative;
  left: 12px; /* 向右偏移，露出右侧圆角 */
  border-radius: 8px; /* 四个角都设置圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 可选：添加阴影增强层次感 */
}

原理说明 #

• 给选中的链接设置position: relative和left: 12px，让它向右超出侧边栏范围，原本被侧边栏边界遮挡的右侧圆角就会显示出来。
• 侧边栏保持默认的overflow: visible，确保超出部分能正常展示。
• 通过侧边栏与选中项的背景色对比，配合圆角和阴影，就能还原图中的视觉效果。

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