如何在CSS中实现边框的局部透明

发布于12月27日

enter image description here

如何才能达到图中所示的边框效果？

我之前的解决方案是使用伪元素来实现遮罩层的效果.但如果我的背景是图像或渐变，就很难调整遮罩层的 colored颜色 .如何实现边框的局部透明，并直接获取背景 colored颜色？

推荐答案

我不确定这是否完全可以使用CSS规则，所以我的解决方案是创建一个SVG图像并将其设置为背景图像.

body {
  background-image: url("https://picsum.photos/seed/picsum/200/300");
}

div {
  width: 116px;
  height: 46px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="116" height="46" viewBox="0 0 116 46" fill="none"><path d="M53 3H23C23 3 3 3 3 23C3 43 23 43 23 43H93C93 43 113 43 113 23C113 3 93 3 93 3H83" stroke="black" stroke-width="5"/></svg>');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 999px;
}