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

【问题标题】：Transparent rounded button with gradient border带渐变边框的透明圆形按钮
【发布时间】：2019-01-18 00:54:26
【问题描述】：

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

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

它有以下要求。

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

我创建了一个代码沙箱，除了边界半径之外，它都正确无误。我使用多边形剪辑路径进行剪切，并使用边界图像作为渐变，这就是边界半径不起作用的原因。

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

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

非常感谢任何建议。

【问题讨论】：

请始终将示例代码添加到问题本身以避免链接失效
好电话，忘了这样做，但看起来你已经为我做了。

标签： css svg linear-gradients

【解决方案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>

【讨论】：

@Kaiido 不，它也适用于动态宽度和高度；）我已经更新了更多示例
这很聪明，只是一个问题，角落是一个奇怪的形状，大概是因为背景渐变与角落重叠了一点。我要摆弄它，看看我能不能让它看起来很完美。如果可以的话，我会把它标记为正确的。
@jonhobbs 是的，半径不会是完美的，但我认为您的半径很小，因此这不是一个大问题
我接受了您的想法，即只制作顶线和底线渐变，并使用其他元素来做到这一点而不会弄乱圆角半径，因此我将其标记为正确。非常感谢。

【解决方案2】：

以下代码使用了伪元素，但不符合要求（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 创建一个rect 并将笔划设置为linearGradient 是可能的。但是，您需要定义 viewBox 大小和元素大小。它会非常迟钝，并且您的按钮的宽度和高度不能变化，因此不符合要求 (5)。

【讨论】：