使边框图片圆形化

Question

使边框图片圆形化

4

我试图设计一个具有自定义边框效果的圆形按钮。目前为止，我已经得到了以下结果：

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
button {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}

<button>TEST</button>

我能否让边框图像成为圆形呢？这种可能性存在吗？

- Camilla

这个回答解决了你的问题吗？可以将具有渐变的边框图像与border-radius一起使用吗？ - Rojo

2

你的边框图像是一个方形SVG吗？你尝试过把它变成圆形的SVG了吗？ - Hassen Ch.

@HassenCh。这个SVG不是我的，而是我从codepen.io上找到的。 - Camilla

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

将其制作为圆形元素，然后将其作为背景简单使用即可：

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
button {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border:5px solid transparent;
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cstyle%3E circle %7B animation: stroke 5s infinite linear; %7D @keyframes stroke %7B to %7B stroke-dashoffset: 600; %7D %7D %3C/style%3E%3ClinearGradient id="g" x1="0%25" y1="0%25" x2="0%25" y2="100%25"%3E%3Cstop offset="0%25" stop-color="%232d3561" /%3E%3Cstop offset="25%25" stop-color="%23c05c7e" /%3E%3Cstop offset="50%25" stop-color="%23f3826f" /%3E%3Cstop offset="100%25" stop-color="%23ffb961" /%3E%3C/linearGradient%3E%3Ccircle class="circle" cx="50" cy="50" r="45" fill="transparent" stroke="url(%23g)" stroke-width="3" stroke-dasharray="300" /%3E%3C/svg%3E') center/100% 100% border-box,
  #f2f2f2 padding-box;
}

<button>TEST</button>

这是我使用的SVG图像：

<svg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
  <style>
    circle {
      animation: stroke 5s infinite linear;
    }

    @keyframes stroke {
      to {
        stroke-dashoffset: 600;
      }
    }

  </style>
  <linearGradient id='g' x1='0%' y1='0%' x2='0%' y2='100%'>
    <stop offset='0%' stop-color='#2d3561' />
    <stop offset='25%' stop-color='#c05c7e' />
    <stop offset='50%' stop-color='#f3826f' />
    <stop offset='100%' stop-color='#ffb961' />
  </linearGradient>
  
  <circle class="circle" cx="50" cy="50" r="45" fill="transparent" stroke='url(#g)' stroke-width="3" stroke-dasharray='300' />
</svg>