Javascript 使用html和css通过多个层创建透明边框

我从一个设计团队那里收到了下面的设计，我不确定在粉色添加按钮和导航栏之间创建透明边框/边距的最佳方法是什么

---

我的html和css包含在下面，但是我不想使用带有特定颜色的边框，而是希望边框通过导航栏是透明的（如果有意义的话）。我这样做的原因是导航栏和按钮将用于具有不同背景颜色的不同页面，因此固定边框颜色并不理想

/*删除默认html页边距*/
html，正文{
保证金：0；
填充：0；
宽度：100%；
背景图像：线性梯度（147度，#6c318f，#262262）；
}
/*将导航栏放在页面底部，并使其粘住*/
navbar先生{
背景色：白色；
溢出：隐藏；
位置：固定；
框大小：边框框；
底部：0；
宽度：100%；
}
/*设置导航栏内链接的样式*/
纳瓦尔先生{
显示：块；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
框大小：边框框；
宽度：20%；
}
.向左浮动{
浮动：左；
}
.向右浮动{
浮动：对；
}
/*删除链接的固有悬停颜色*/
.导航栏a.激活{
颜色：白色；
}
/*底部导航栏图标*/
.底部导航图标{
宽度：24px；
高度：24px；
对象匹配：包含；
不透明度：0.4；
}
/*活动/悬停底部导航栏图标*/
.bottom-nav-icon.active、.bottom-nav-icon:悬停{
不透明度：1；
}
/*圆形按钮*/
.购买按钮{
位置：固定；
/*将按钮固定在底部中心，并显示在其他元件上方*/
右：0；
左：0；
底部：28px；
右边距：自动；
左边距：自动；
z指数：5；
/*设置按钮的样式*/
背景色：#ec008c；
颜色：白色；
文本对齐：居中；
显示：内联块；
宽度：56px；
高度：56px；
字体大小：16px；
边界半径：50%；
/*在按钮周围创建边框-这就是我被卡住的地方*/
边框：2倍实心#262262；
}

埃莫耶尼
+

只需使用边框颜色中的

透明值即可：

 border: 2px solid transparent;


.navbar{
背景色：白色；
溢出：隐藏；
位置：固定；
框大小：边框框；
底部：0；
宽度：100%；
}
.购买按钮{
位置：固定；
/*将按钮固定在底部中心，并显示在其他元件上方*/
右：0；
左：0；
底部：28px；
右边距：自动；
左边距：自动；
z指数：5；
/*设置按钮的样式*/
背景色：#ec008c；
颜色：白色；
文本对齐：居中；
显示：内联块；
宽度：56px；
高度：56px；
字体大小：16px；
边界半径：50%；
/*在按钮周围创建边框-这就是我被卡住的地方*/
边框：2倍实心透明；
}
+
只需使用边框颜色中的
透明值即可：

 border: 2px solid transparent;


.navbar{
背景色：白色；
溢出：隐藏；
位置：固定；
框大小：边框框；
底部：0；
宽度：100%；
}
.购买按钮{
位置：固定；
/*将按钮固定在底部中心，并显示在其他元件上方*/
右：0；
左：0；
底部：28px；
右边距：自动；
左边距：自动；
z指数：5；
/*设置按钮的样式*/
背景色：#ec008c；
颜色：白色；
文本对齐：居中；
显示：内联块；
宽度：56px；
高度：56px；
字体大小：16px；
边界半径：50%；
/*在按钮周围创建边框-这就是我被卡住的地方*/
边框：2倍实心透明；
}
+
您可以使用类似于此的径向背景或透明图像：


.navbar{
背景：径向梯度（顶部圆形，透明34px，#fff 34px，#fff 33px）；
溢出：隐藏；
位置：固定；
框大小：边框框；
底部：0；
高度：60px；
宽度：100%；
}
.购买按钮{
位置：固定；
/*将按钮固定在底部中心，并显示在其他元件上方*/
左：计算（50%-20px）；
底部：30px；
右边距：自动；
左边距：自动；
z指数：5；
/*设置按钮的样式*/
背景色：#ec008c；
颜色：白色；
文本对齐：居中；
显示：内联块；
宽度：56px；
高度：56px；
字体大小：16px；
边界半径：50%；
/*在按钮周围创建边框-这就是我被卡住的地方*/
边框：2倍实心透明；
}
img{
高度：30px；
宽度：自动；
} 
身体{
背景：url(https://images.unsplash.com/photo-1520987623799-101883d6585a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=614&q=80）无重复中心顶部；
}
+
您可以使用类似于此的径向背景或透明图像：


.navbar{
背景：径向梯度（顶部圆形，透明34px，#fff 34px，#fff 33px）；
溢出：隐藏；
位置：固定；
框大小：边框框；
底部：0；
高度：60px；
宽度：100%；
}
.购买按钮{
位置：固定；
/*将按钮固定在底部中心，并显示在其他元件上方*/
左：计算（50%-20px）；
底部：30px；
右边距：自动；
左边距：自动；
z指数：5；
/*设置按钮的样式*/
背景色：#ec008c；
颜色：白色；
文本对齐：居中；
显示：内联块；
宽度：56px；
高度：56px；
字体大小：16px；
边界半径：50%；
/*在按钮周围创建边框-这就是我被卡住的地方*/
边框：2倍实心透明；
}
img{
高度：30px；
宽度：自动；
} 
身体{
背景：url(https://images.unsplash.com/photo-1520987623799-101883d6585a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=614&q=80）无重复中心顶部；
}
+
我尝试过这个方法，但问题是，按钮后面的白色导航栏中的透明边框是不透明的，因此导航栏和浮动按钮之间的间隙不像设计中那样可见