如何将CSS内凹角的box-shadow改为模糊效果，实现L形菜单栏？

一、修改现有代码实现模糊内凹角 #

你当前用box-shadow实现内凹角的方式无法应用backdrop-filter，因为box-shadow不属于元素本身的背景/前景，无法承载这个滤镜属性。可以调整#top及其伪元素的样式，让伪元素成为可应用滤镜的实体形状，再通过overflow:hidden实现内凹：

body {
  background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-repeat: no-repeat;
  background-size: cover;
}

.rec3 {
  /*Horizontal bar*/
  position: fixed;
  width: 60vw;
  height: 80px;
  backdrop-filter: blur(20px);
  bottom: 20px;
  left: 20px;
  border-radius: 0 25px 25px 80px;
}

.rec4 {
  /*Vertical bar*/
  position: fixed;
  width: 80px;
  height: 60vh;
  bottom: 90px;
  left: 20px;
  backdrop-filter: blur(20px);
  border-radius: 25px 25px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: hidden;
}

#top {
  position: absolute;
  height: 30px;
  width: 30px;
  left: 0;
  top: -30px;
  overflow: hidden;
  z-index: 1;
}

#top::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 200%;
  width: 200%;
  border-radius: 50%;
  backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.1);
  transform: translate(50%, 50%);
}

二、更简洁的L形菜单栏实现方案 #

不需要额外的内凹元素，通过两个栏目的定位和border-radius配合，直接实现衔接处的内凹，同时都应用模糊效果：

body {
  background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-repeat: no-repeat;
  background-size: cover;
}

/* 横向栏 */
.nav-horizontal {
  position: fixed;
  width: 60vw;
  height: 80px;
  bottom: 20px;
  left: 20px;
  backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.1);
  border-radius: 0 25px 25px 0;
  padding-left: 80px;
  box-sizing: border-box;
}

/* 纵向栏 */
.nav-vertical {
  position: fixed;
  width: 80px;
  height: calc(60vh + 30px);
  bottom: 20px;
  left: 20px;
  backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.1);
  border-radius: 25px 25px 0 25px;
}

<div class="nav-vertical"></div>
<div class="nav-horizontal"></div>

这个方案的核心是让纵向栏向下延伸，覆盖横向栏的左上角，再通过各自的border-radius形成内凹效果，两个元素都直接应用backdrop-filter，无需额外的内凹处理元素。

内容的提问来源于stack exchange，提问作者Ánh Nắng Của Em