使部分边框不可见？ CSS

Question

我一直在努力重现这个按钮：

具体来说，我似乎找不到如何使检查图标周围的边框不可见。目前除了这部分之外，它已经“完成”了。

这是一个 nuxt3 组件，它看起来像这样：

 <template>
  <div class="button-container">
    <nuxt-link :to="link.link">
      {{ link.title }}
    </nuxt-link>
    <div class="check-container">
      <svg-icon type="mdi" :path="mdiCheckBold" class="icon is-large" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiCheckBold } from '@mdi/js'

type Link = {
  title: string;
  link: string;
};

interface Props {
  link: Link;
}

defineProps<Props>()
</script>

<style scoped lang="scss">
@import 'assets/style/_variables.scss';

.button-container {
  position: relative;
  border: dotted $white 0.24rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18rem;
  height: 18rem;
  a {
    text-decoration: none;
    color: $white;
    font-size: 2rem;
  }
  .check-container {
    position: absolute;
    top: 11.5rem;
    left: 11.5rem;
    border: solid $white 0.24rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7rem;
    height: 7rem;
    color: $white;
    background: $background-gradient;
  }
}
</style>

任何帮助都会很棒，提前谢谢您！

Answer 1

您可以使用蒙版来剪切部分边框：

.box {
  --a: 40deg; /* the position */
  --r: 35px; /* the radius */

  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dashed red;
  -webkit-mask:
     radial-gradient(30px at
       calc(50% + 50%*cos(var(--a)))
       calc(50% + 50%*sin(var(--a))),
      #0000 98%,#000)
}

<div class="box"></div>

Answer 2

在

.check-container

元素周围渲染光环的解决方案，该解决方案将隐藏后面的任何内容（参见父元素边框），可以使用

box-shadow

:root{
  --border-color: white;
  --link-color: white;
  --check-color: white;
  --check-border: white;
  --check-bg: aqua;
  --parent-bg: aqua;
}

body{
  background: var(--parent-bg);
}

.button-container {
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
    
  border: dotted var(--border-color) 0.24rem;
  border-radius: 50%;
  
  width: 18rem;
  height: 18rem;
  
  background: var(--parent-bg);
}

.button-container a {
  text-decoration: none;
  color: var(--link-color);
  font-size: 2rem;
}

.button-container .check-container {
  position: absolute;
  
  top: 11.5rem;
  left: 11.5rem;
  
  border: solid var(--check-border) 0.24rem;
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 7rem;
  height: 7rem;
  
  color: var(--check-color);
  background: var(--check-bg);
     
  box-shadow: 0 0 0 1em var(--parent-bg);  
}


.icon-circle {    
    font-size: 5em;    
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="button-container">
  <a href="">COMMENCER</a>      
  <div class="check-container">
    <i class="fa-solid fa-check icon-circle"></i>
  </div>
</div>