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

Question

首先，我在SO中搜索了类似的问题，有很多但没有一个满足以下确切要求。

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

它具有以下要求。

1. 它的边框为1像素，带有水平渐变。
2. 它必须是透明的。
3. 它必须有圆角
4. 它将具有透明的边框切口。
5. 它的宽度和高度必须可变
6. 它应该在所有现代浏览器（不是IE）中都可以使用

我创建了一个“代码沙箱”，该代码沙箱除了边界半径外都可以正确使用。我已经使用了多边形剪切路径进行剪切，并使用了border-image进行了渐变，这就是为什么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

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

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

我制作了边框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>

Answer 2

以下代码使用伪元素，但不满足要求（2）。也许您可以尝试使用<InputClaims> <InputClaim ClaimTypeReferenceId="clientId" PartnerClaimType="{property:ClientId}" DefaultValue="{OIDC:ClientId}" /> </InputClaims> 来删除背景。

mix-blend-mode

可以使用SVG创建笔划设置为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%) } 的{​​{1}}。但是，您需要定义rect的大小和元素的大小。这将非常无响应，并且按钮的宽度和高度不能可变，因此不符合要求（5）。