带有渐变边框的透明圆形按钮

Question

首先，我在 SO 中搜索了类似的问题，但有很多 none 具有以下确切要求。

我正在尝试使用纯 css 创建下面的按钮。

它具有以下要求。

它有一个水平渐变的 1px 边框。
必须是透明的。
一定要有圆角
它将有一个边框的切口，也是透明的。
必须是可变宽度和高度
它应该适用于所有现代浏览器（不是 IE）

我创建了一个 Code Sandbox，它除了 border-radius 之外的所有内容都是正确的。我已经使用多边形剪辑路径进行裁切，并使用边框图像进行渐变，这就是边框半径不起作用的原因。

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  
  background-color: transparent;

  border: solid 1px;
  border-radius: 6px;
  border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;

  clip-path: polygon(0 0, 12px 0, 12px 1px, 24px 1px, 24px 0, 100% 0, 100% 100%, 0 100%);

}

 <div style="padding:40px;">
   <a class="button">This is a button</a>
  </div>

https://codesandbox.io/s/kw9p9k5073

到目前为止，我已经设法避免使用 svgs，因为我对它们的理解还不够好，无法正确实施解决方案，但如果我必须走那条路，我会的。

如有任何建议，我们将不胜感激。

Answer 1

下面的代码使用了伪元素，但不符合要求（2）。也许您可以尝试使用 mix-blend-mode 删除背景。

body {
    font-family:sans-serif;
    background-color:#232837
}

.button {
    cursor:pointer;
    display:inline-block;
    padding:13px 15px 12px;
    color:#fff;
    background:#232837;
    border-radius:6px;
    position:relative
}

.button::after {
    position:absolute;
    top:-1px;
    bottom:-1px;
    left:-1px;
    right:-1px;
    background:linear-gradient(to left,#743ad5 0%,#d53a9d 100%);
    content:'';
    z-index:-1;
    border-radius:6px;
    clip-path:polygon(0 0,12px 0,12px 4px,24px 4px,24px 0,100% 0,100% 100%,0 100%)
}

使用 SVG 创建笔画设置为 linearGradient 的 rect 是可能的。但是，您需要定义 viewBox 大小和元素大小。这将非常无响应，并且您的按钮的宽度和高度不能可变，因此不符合要求 (5)。

Answer 2

考虑到您将拥有带 1px 边框的水平渐变这一事实，我们可以通过创建多个背景层来模拟这一点。左右边框可以被认为是纯色（因为它是水平渐变），只有 top/bottom 需要真正的渐变。

棘手的部分是找到顶部渐变的百分比值以获得透明间隙并保持与底部相同。为此，我使用了一些数学来找到正确的值。

我制作了边框 2px 以便更好地查看结果

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  border:2px solid transparent;
  border-radius:10px;
  border-right-color:#743ad5;
  border-left-color:#d53a9d;
  background:
    linear-gradient(to left,
      rgb(116, 58, 213) 0%, rgb(186, 58, 143) 70% ,
      transparent 70%,  transparent 85%, 
      rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,
    linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;
  background-repeat:no-repeat;
}

<a class="button">This is a button</a>
<a class="button">This is a long button</a>
<a class="button" style="padding:10px">This is a very long button</a>

带有渐变边框的透明圆形按钮

Transparent rounded button with gradient border

css

svg

linear-gradients